2

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 Answers 3

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 );
    }
});
4
  • Thanks so much for providing the link. Upvoted, but not the solution - posted it in the answers below :)
    – Sylvain
    Aug 20, 2013 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 3, 2013 at 14:24
  • this works when you have nested dialogues on the page. why isn't this built into tinymce by default?! Sep 25, 2014 at 16:05
  • I'm using the react version of tinyMCE, do you have a solution that works with react? I'm not suing JQUERY and the modal where this happens is react-bootstrap/Modal Oct 10, 2023 at 19:36
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.

0

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

tinymce.get('editor_id').getBody().setAttribute('contenteditable', 'false');
1
  • How would that fix the OP's problem?
    – alex
    Jun 24, 2013 at 9:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.