TinyMCE 4 links plugin modal in not editable

Question

I am using tinyMCE4 editor inside a Boostrap modal dialog. when I clicked on link icon it opens a new modal dialog box, It displayed fine but the input areas are not editable.

<div id="editing" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">     <form>     <label>       <span>Description</span>       <div id="description"></div>     </label>      <form>  </div>    <script>     tinymce.init({     selector: 'div#description',     inline: false,     theme : "modern",     schema: "html5",     add_unload_trigger: false,     statusbar: false,     plugins: "link",     toolbar: "link | undo redo",     menubar: false  });     </script> 

Any suggestions

Thanks in advance

Answer 1

From https://github.com/tinymce/tinymce/issues/782

For jQuery UI dialogs you can do this:

$.widget("ui.dialog", $.ui.dialog, {     _allowInteraction: function(event) {         return !!$(event.target).closest(".mce-container").length || this._super( event );     } }); 

This seems to be a more generalized solution that you might be able to modify for Bootstrap:

$(document).on('focusin', function(e) {     if ($(e.target).closest(".mce-window").length) {         e.stopImmediatePropagation();     } }); 

Update:

For the new version of ag-grid (20.2.0), if you are using the silver theme, mce-window was renamed to tox-dialog so you can just change the target class.

$(document).on('focusin', function(e) {     if ($(e.target).closest(".tox-dialog").length) {         e.stopImmediatePropagation();     } }); 

Answer 2

Ran into this issue as well. The code provided by prabu on his JS Fiddle almost worked perfectly.

I had to make a slight modification to it so that it would work for the MoxieManager fields when they are open as well.

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

This allows for editing images or renaming file paths in the MoxieManager when opened inside a Bootstrap Modal. Thanks for this.