0

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?

  • 1
    Please open browser console and check for javascript error. There might be any javascript conflict error. – Prashant Baldha Dec 4 '16 at 3:06
  • There are no JavaScript errors showing when I open the console and click any of the not working parts of the editor. – thairish Dec 5 '16 at 21:41
0

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" );

    }

});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.