WordPress 4.5 Inline Link Toolbar not working on custom wp_editor instance

  • jchew

    (@jchew)


    7 years, 11 months ago

    I am having an issue with initializing the inline link toolbar in a custom instance of the WP editor.

    The instance is added in a dynamically loaded modal using the wp_editor function and some JavaScript. It has been working correctly up to WordPress 4.5, but is now broken.

    There are some parts that work. When I click the button to add/edit a link, the text does get highlighted as a placeholder, it’s just that the toolbar does not show. The markup for the TinyMCE plugins does get added to the bottom of the document and if I open and close the media editor attached to the new instance, the inline link toolbar will then function correctly.

    There are no JavaScript errors when the toolbar is not functioning correctly, it just doesn’t seem as if the JavaScript handlers are bound correctly or something.

    This is a bit of a weird one, but I would super appreciate any help or advice that anyone might have.

    Here is the JS code I use to initialize the WP editor instance.

    var $element = jQuery('#newcontent');
var qt;
var textfield_id = $element.attr('id');

window.tinyMCEPreInit.mceInit[textfield_id] = _.extend({}, tinyMCEPreInit.mceInit['content']);

if(_.isUndefined(tinyMCEPreInit.qtInit[textfield_id])) {
    window.tinyMCEPreInit.qtInit[textfield_id] = _.extend({}, tinyMCEPreInit.qtInit['replycontent'], {id: textfield_id})
}
qt = quicktags( window.tinyMCEPreInit.qtInit[textfield_id] );
QTags._buttonsInit();

//make compatable with TinyMCE 4 which is used starting with WordPress 3.9
if (tinymce.majorVersion === "4") {
    tinymce.execCommand( 'mceAddEditor', false, textfield_id );
}

window.switchEditors.go(textfield_id, 'tinymce');
//focus on this RTE
tinyMCE.get(textfield_id).focus();
window.wpActiveEditor = textfield_id;
Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter jchew

    (@jchew)

    7 years, 11 months ago

    An update, this issue does appear to be tied in with the Bootstrap modal in which I am adding the instance of wp_editor.

    I am not sure what about opening and closing the WordPress media modal makes this come un-stuck. I have tried manually re-focusing on the wpbody-content ID when the modal / editor is initialized using the following code, but that did not work.

    jQuery(#wpbody-content’).focus();

    Thread Starter jchew

    (@jchew)

    7 years, 11 months ago

    Solved.. it turns out the link dialog does not work if the body has the “modal-open” class.

    wunderdojo

    (@wunderdojo)

    7 years, 11 months ago

    Just ran into the same issue with one of my plugins. In my case I opted to simply remove the modal-open class from the body using;

    //- stop modal from adding modal-open class to body -- breaks new inline link editor
   $( document ).on( 'shown.bs.modal wplink-open', function( e ){
     $( document.body ).removeClass( 'modal-open' );
   } );

    Thanks for pointing me in the right direction, hope this helps someone else.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘WordPress 4.5 Inline Link Toolbar not working on custom wp_editor instance’ is closed to new replies.