TinyMCE 4 insert link form fields disabled

Question

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.

score 4 · Answer 1 · answered May 02 '19 at 09:48

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

score 3 · Answer 2 · answered Jun 04 '22 at 00:39

3

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

<Dialog disableEnforceFocus={true} ...>

answered Jun 04 '22 at 00:39

JohnFlux

188
1
5

You are a God, a God I said!!! I've been fighting with this for hours – Carlos Bueno Jan 16 '23 at 23:17

score 2 · Accepted Answer · edited May 23 '17 at 10:33

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

score 0 · Answer 4 · answered Feb 11 '20 at 23:05

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

score 0 · Answer 5 · answered Feb 05 '23 at 11:15

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 component and then link dialog inputs got their focus.

score 0 · Answer 6 · answered May 30 '23 at 07:48

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.

TinyMCE 4 insert link form fields disabled

6 Answers6

Linked