TinyMCE 4 insert link form fields disabled

问题

I'm using the tinymce-rails gem which uses TinyMCE 4 and I'm loading the link plugin and all this is initiated after/in a colorbox popup.

TinyMCE editor is working perfectly but the link button brings up a dialog to add/edit a link, but none of the fields except the target are available for editing.

below is the related code:

setup_new_message: ->
  tinyMCE.init
    selector: '.tinymce'
    plugins: "textcolor link"
    menubar: false
    toolbar: "formatselect | fontselect | bold italic underline | forecolor | alignleft aligncenter alignright | bullist numlist | link"
    height: 250

  $(document).on 'focusin', (e) ->
    if $(e.target).closest(".mce-window").length
      e.stopImmediatePropagation()

I found the $(document).on 'focusin' in other stackoverflow question/answers but this is not working for me. It does fire the e.stopImmediatePropagation() but it is not working as everyone said it would.

Any thoughts? Thanks in advance.

回答1:

I found the answer once I narrowed down the actual issue was that I was loading the TinyMCE into a jquery.colorbox popup. Colorbox prevents any type of focus event/action to happen outside of its defined container. Where as TinyMCE pops its stuff up through iframes, not actually in the colorbox container.

the fix was simple: in colorbox options set trapFocus: false and all works as it should. Understand tho, this means the user can tab out of the focused colorbox to elements behind the overlay.

via John Naegle on stackoverflow

回答2:

Depending on the version of TinyMCE, the solution would be:

$(document).on('focusin', function(e) {
    var target = $(e.target);
    if (target.closest(".mce-window").length || target.closest(".tox-dialog").length) {
        e.stopImmediatePropagation();
        target = null;
    }
});

And of course the answer from Sparkmasterflex

回答3:

TinyMCE5 and MagnificPopup compatibility:

$.magnificPopup.instance._onFocusIn = function( e ) {
    try {
        if( $( e.target ).attr( 'class' ).indexOf( 'tox-' ) >= 0 ) {
            return true;
        }
    } catch( e ) {}

    $.magnificPopup.proto._onFocusIn.call( this, e );
}

来源：https://stackoverflow.com/questions/33618361/tinymce-4-insert-link-form-fields-disabled