TinyMCE modal in JQuery modal not editable

问题

I am running a tinyMCE editor inside a JQuery UI modal dialog. Everything works fine, except for those functions of tinyMCE which themselves open a new modal (links, for example). These modals are displayed fine but the input areas are not editable. The js code is OK according to Firebug and the HTML is pretty straightforward.

Any clue where it might come from?

Edit:

<script type="text/javascript">
tinymce.init({
    selector: "textarea",
    plugins: "autolink link table textcolor",
    menubar: false,
    toolbar: "undo redo | styleselect | forecolor backcolor | bold italic | link unlink | table"
});
$(document).ready(function(){
    $(".sendmail")
        .button({
            icons: {
                primary: "ui-icon-mail-closed"
            },
            text: false
        })
        .click(function(){
            $("#sendmailform").dialog("open");
        })
    ;
    $(function(){
        $("#sendmailform")
            .dialog({
                autoOpen: false,
                title: "Send mail confirmation",
                modal:true,
                width: 750,
                [buttons & ajax]
            })
        ;
    });
});
</script>

回答1:

From http://www.tinymce.com/develop/bugtracker_view.php?id=5917

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

回答2:

Thanks to @Harry, the great guys on the TinyMCE bugtracker provided the solution.

I just added the code below on top of my script loaded after the DOM, just before loading tinyMCE:

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

Works like a charm, while the one posted by @Harry did not.

回答3:

Your question need more detail to answered, but you can try this:

tinymce.get('editor_id').getBody().setAttribute('contenteditable', 'false');

来源：https://stackoverflow.com/questions/17271634/tinymce-modal-in-jquery-modal-not-editable

标签

jquery

tinymce

modal-dialog