TinyMCE modal in JQuery modal not editable

2
votes

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
jquerytinymcemodal-dialog

3 Answers

2
votes

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
votes

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.

0
votes

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

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