将 tinymce 与 blockui 一起使用答案

【问题标题】：using tinymce with blockui将 tinymce 与 blockui 一起使用
【发布时间】：2014-01-23 23:13:33
【问题描述】：

我想做的是用blockUI将我的网页背景变灰，然后在顶部打开一个tinymce。我最初可以让它工作，但我打开另一个 tinymce 对话框，比如插入链接或编辑 html 源代码，对话框打开但被阻止。我想知道是否有办法在 blockUI 中取消阻止它。我尝试了几件事，但没有成功。这是我当前的代码：

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

【问题讨论】：

我也在尝试解决这个问题。请参阅 stackoverflow.com/questions/26226454/… 和 fiddle.tinymce.com/bzeaab/16 。你有想过吗？

标签： jquery tinymce blockui

【解决方案1】：

似乎可行的一种解决方案是在 .blockUI 调用中将bindEvents: false 作为选项传递（以及message 等）。请参阅http://fiddle.tinymce.com/bzeaab/17，了解如何修改失败的小提琴（http://fiddle.tinymce.com/bzeaab/16）以允许插件工作。

在您的情况下，$.blockUI({ message: editDiv }); 变为

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

此问题的一个潜在缺点是，这种方法会取消绑定 blockUI 覆盖中的所有内容，而不仅仅是 tinymce 插件，因此可能无法满足您的需求。

【讨论】：