wp_editor some functionality not working on custom theme

Question

I am creating a custom theme. In this theme I have some custom options in the edit page screen. For this I have a custom button which appears and when clicked it opens a overlay div which I created (this overlay has the custom option fields). Both the HTML for the button and overlay are output through the "post_submitbox_misc_actions" action. The basic form of it looks like this in my functions.php file:

add_action( 'post_submitbox_misc_actions', 'add_custom_button' );

function add_custom_button() {

    global $current_screen;

    if( $current_screen->post_type == 'page' ) {

        //The custom button and HTML is echoed out here

    }

}

Now I want to add the default Wordpress editor as a field in my overlay div. To start with this I took a basic example from the codex:

$content = '';
$editor_id = 'mycustomeditor';

wp_editor( $content, $editor_id );

This displays, however, I am having issues with some of the functionality for it. For example if I click on the "text" tab nothing happens, the same if I click on the "Insert Download", "Add Media" buttons. If I click on the "Insert Download" button the URL will get appended with "#TB_inline?width=640&inlineId=choose-download" but nothing else happens. All of the other buttons on the editor work.

I have checked my browser console and receive no JavaScript errors when the editor loads/I click a button on the editor.

In the "admin_enqueue_scripts" action the:

wp_enqueue_media();

function gets called.

Is there anything else I need to do to use the editor, or something I missed or set up incorrectly?

Answer 1

The issue was to do with how I created my overlay. Pretty much I was using e.stopPropagation() to stop inner divs from closing on the overlay when the parent was clicked. Using e.stopPropagation() prevented some clicks of the wp editor from working.

Instead I used a check which would only apply the closing of the overlay on the parent, not the descendent elements which removed the use of e.stopPropagation().

$( "#parent_overlay" ).click( function( e ) {

    //Without this check all inner elements would also apply the closing code
    if( e.target == this ) {

        $( "#parent_overlay" ).fadeOut();
        $( "body" ).removeClass( "noscroll" );

    }

});