TinyMCE modal in JQuery modal not editable

2019-07-17 14:39发布

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>

3条回答
【Aperson】
2楼-- · 2019-07-17 14:48

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

tinymce.get('editor_id').getBody().setAttribute('contenteditable', 'false');
查看更多
Melony?
3楼-- · 2019-07-17 14:51

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 );
    }
});
查看更多
戒情不戒烟
4楼-- · 2019-07-17 15:02

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.

查看更多
登录 后发表回答