简体   繁体   中英

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.

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

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

对于将 tinymce 放入 Material UI mui 对话框的任何人,请执行以下操作:

<Dialog disableEnforceFocus={true} ...>

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM