using tinymce with blockui

Question

What I want to do is grey out the my webpage background with blockUI, then open an tinymce on top. I can get this to work initially, but I open another tinymce dialog like to insert a link or edit the html source, the dialog opens but it's blocked. I'm wondering if there is a way to unblock this in blockUI. I've tried a few things but haven't been successful. Here is my current code:

var editDiv="<div id='tMce'><p>";   
editDiv+="<textarea style='width:90%;height:400px;' id='ed_"+theID+"'>"+theHTML+"</textarea><p>";
editDiv+="<button onclick='closeCMS();'>close</button> ";
editDiv+="<button onclick='saveEdit("+dq+theID+dq+","+dq+theID+dq+")'>save</button> ";
editDiv+="</div>";

    $.blockUI({ message: editDiv }); 

    tinymce.init({
        selector: "textarea",
        theme: "modern",
        plugins: [
    "advlist autolink lists link charmap print preview anchor",
    "searchreplace visualblocks code fullscreen",
    "insertdatetime media table contextmenu paste"
        ]
    });

    $('textarea').each(function(){
        $(this).unblock();
    });

    $('input').each(function(){
        $(this).unblock();
    });     

Sterigma

I'm trying to solve this too. Please see #26226954 and fiddle.tinymce.com/bzeaab/16 . Did you ever figure it out? – Callable

Answer 1

One solution that seems to work is to pass bindEvents: false in the .blockUI call as an option (along with message, etc.). See http://fiddle.tinymce.com/bzeaab/17 for how the failing fiddle (at http://fiddle.tinymce.com/bzeaab/16) was amended to allow the plug in to work.

In your case, $.blockUI({ message: editDiv }); becomes

$.blockUI({ message: editDiv, bindEvents: false });

One potential downside to this issue is that this approach unbinds everything in the blockUI overlay, not just tinymce plugins, so could be too overreaching for your needs.

Callable