Tinymce's source code textarea is not editable

Question

I am using ui-tinymce (https://github.com/angular-ui/ui-tinymce) for one of my projects. Working by the demo (there isn't much documentation for the directive). In general everything is working fine except the source code editor.

In my case WYSIWYG is opening within a modal (also angular: http://angular-ui.github.io/bootstrap/#/modal). The implementation of source code in timyMCE is opening another modal. Normally it is not a problem, however in my case the textarea of source code is not editable. If I force close the the first modal, source code becomes aditable.

At this point, I am not even sure where to dig. The only thing that I can see is that source code textarea have an event attached to it (not sure if it should).

I would appreciate any help in any direction.

Answer 1

I had the same problem with it in jQuery UI dialogs.

The official web page now has integration docs:

https://www.tiny.cloud/docs/integrations/bootstrap/

// Prevent Bootstrap dialog from blocking focusin
$(document).on('focusin', function(e) {
  if ($(e.target).closest(".mce-window").length) {
    e.stopImmediatePropagation();
  }
});

https://www.tiny.cloud/docs/integrations/jquery/

// Prevent jQuery UI dialog from blocking focusin
$(document).on('focusin', function(e) {
    if ($(e.target).closest(".mce-window, .moxman-window").length) {
        e.stopImmediatePropagation();
    }
});

I found the code above only works if we run it before opening the dialog box - it does not work if I try to run it just before initializing TinyMCE but after opening the dialog.

This has also been answered here: TinyMCE 4 links plugin modal in not editable

Answer 2

I used tinymce inside jsf (primefaces) and face the same problem when used in ui-dialog. After searching saw that most answers were related to focusin event. But those didn't work for me. In the end it was about the z index. Below css solved the problem:

.tox-dialog {
    z-index: 150000 !important;
}