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'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.

• javascript
• jquery
• ruby-on-rails
• ruby-on-rails-4
• tinymce-4

6 Answers 6

For anyone putting tinymce inside a Material UI mui Dialog, do:

<Dialog disableEnforceFocus={true} ...>

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

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

TinyMCE5 and MagnificPopup patibility:

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

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

I faced the same problem TineyMce in Vuejs, I was loading TinyMce inside a dialog when I was trying to add a link another dialog gets open which the second dialog had no focus. Instead of loading the Editor in a dialog I load that in a ponent and then link dialog inputs got their focus.

I am using TinyMCE as bundledEditor which has been instructed in the documentation page; https://www.tiny.cloud/docs/tinymce/6/react-pm-bundle/#procedure

@JohnFlux's answer:

For anyone putting tinymce inside a Material UI mui Dialog, do:

<Dialog disableEnforceFocus={true} ...>

worked fine for me.