TinyMCE modal in JQuery modal not editable

Question

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>

score 2 · Answer 1 · answered Aug 15 '13 at 20:46

2

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

answered Aug 15 '13 at 20:46

Harry

3,116
2
23
20

Thanks so much for providing the link. Upvoted, but not the solution - posted it in the answers below :) – Sylvain Aug 20 '13 at 14:15
After quite some developments, it appears that both solutions work depending on context. The one I posted worked on most pages, but on one of them kept throwing an "event is not defined error". I replaced my code with the one above, which worked. – Sylvain Sep 03 '13 at 14:24
this works when you have nested dialogues on the page. why isn't this built into tinymce by default?! – Ryan Vettese Sep 25 '14 at 16:05

score 2 · Accepted Answer · answered Aug 20 '13 at 14:19

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.

score 0 · Answer 3 · answered Jun 24 '13 at 09:06

0

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

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

answered Jun 24 '13 at 09:06

Aldi Unanto

3,626
1
22
30

How would that fix the OP's problem? – alex Jun 24 '13 at 09:21

TinyMCE modal in JQuery modal not editable

3 Answers3

Linked