prabu prabu - 1 year ago 211
jQuery Question

TinyMCE 4 links plugin modal in not editable

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">
<div id="description"></div>

selector: 'div#description',
inline: false,
theme : "modern",
schema: "html5",
add_unload_trigger: false,
statusbar: false,
plugins: "link",
toolbar: "link | undo redo",
menubar: false

enter image description here

Any suggestions

Thanks in advance

Answer Source


For jQuery UI dialogs you can do this:

$.widget("ui.dialog", $.ui.dialog, {
    _allowInteraction: function(event) {
        return !!$(".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 ($(".mce-window").length) {
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download