How to add custom JS to tinymce in wordpress

Question

So I want to enhance the functionality of the TinyMCE editor in WordPress by adding custom JS script and CSS to it.

I was able to add custom CSS to it by using this method:

function plugin_mce_css($stylesheet) {    
    $stylesheet .= ','; 

    $stylesheet .= plugins_url ('editor.css', __FILE__); 

    return $stylesheet;
}
add_action( 'mce_css', 'plugin_mce_css' );

Using that, I was able to add some styling to the wp-editor css class but when it got to adding custom Js script I wasn't able to do any DOM manipulation of Wp-editor after adding JS script with this method:

function custom_script() { 
    printf( '<script type="text/javascript" src="%s"></script>',  plugins_url('editor.js', __FILE__) ); 
}
add_action( 'after_wp_tiny_mce', 'custom_script' );

What am I getting wrong when adding the JS? I need help.

Answer 1

If google search result brought you here see my answer to the exact same question on SO: https://stackoverflow.com/a/77546495/1568334