TinyMCE和fancybox交互错误

Question

我正在尝试在我使用 jquery fancybox 显示的文本区域上使用 tinyMCE。我试过使用 tinyMCE jQuery 插件、tinyMCE 的默认下载版本和 tinyMCE 的完整下载版本

我第一次打开表单时（表单通过 fancybox 显示）一切都按预期工作； 如果我取消操作并尝试再次打开表单，textarea 将被禁用，但仍显示 tinyMCE 控件，只是它们不起作用。

这是我使用的表单的代码。它通过fancybox显示：

<div id="add-task" class="form-container">
<form method="POST" action="/task-add">
    <input type="hidden" name="project" id="add-task-id" value=""/></span>
    <div class="element">
        <span class="label">Short description</span>
        <span class="field"><textarea name="sh_description" rows="5" cols="15"></textarea></span>
    </div>
    <div class="element">
        <span class="label">Task description</span>
        <span class="field"><textarea name="description" rows="5" cols="15" id="htmlarea"></textarea></span>
    </div>
</form>
</div>

这是 tinyMCE 初始化：

    tinyMCE.init({

        // General options
        theme : "simple",
        mode : "none",


        // Example content CSS (should be your site CSS)
        content_css : "/static/css/tinymce.css",

        // Drop lists for link/image/media/template dialogs
        template_external_list_url : "/static/js/tinymce/lists/template_list.js",
        external_link_list_url : "/static/js/tinymce/lists/link_list.js",
        external_image_list_url : "/static/js/tinymce/lists/image_list.js",
        media_external_list_url : "/static/js/tinymce/lists/media_list.js",

        // Style formats
        style_formats : [
            {title : 'Bold text', inline : 'b'},
            {title : 'Red text', inline : 'span', styles : {color : '#ff0000'}},
            {title : 'Red header', block : 'h1', styles : {color : '#ff0000'}},
            {title : 'Example 1', inline : 'span', classes : 'example1'},
            {title : 'Example 2', inline : 'span', classes : 'example2'},
            {title : 'Table styles'},
            {title : 'Table row 1', selector : 'tr', classes : 'tablerow1'}
        ]

    });

以及fancybox启动的代码：

function mceAdd(){
    tinyMCE.execCommand("mceAddControl", false, "htmlarea");
}
function mceEnd(){
    tinyMCE.execCommand("mceRemoveControl", false, "htmlarea");

}

$(".taskAdd").fancybox({
    'titlePosition'     : 'inside',
    'transitionIn'      : 'none',
    'transitionOut'     : 'none',
    'onComplete'        : mceAdd,
    'onClosed'          : mceEnd
});

所有的 javascript 都在 $(document).ready() 语句中运行。

我已经阅读了很多关于 stackoverflow 的问题，但我还没有找到适合我的解决方案。在当前状态下，当调用mceEnd() 函数时，我得到一个“Component returned failure code: 0x8000ffff (NS_ERROR_UNEXPECTED) [nsIDOMHTMLDocument.implementation]”。

我在 Opera 和 Firefox 中都遇到错误。如果有人对我做错了什么有任何想法，他们将不胜感激。

更新：

尝试了 Thariama 的函数，结果如下： 如果我不使用fancybox 中的任何东西（只需打开并关闭它），我会收到“Component returned failure code: 0x8000ffff (NS_ERROR_UNEXPECTED) [nsIDOMHTMLDocument.implementation]”错误，但如果我尝试更改区域（例如，选择粗体功能然后关闭fancybox 对话框）我收到“j is null”错误

使用的版本：TinyMCE 3.4.7、jQuery fancybox 1.3.4、jQuery 1.7.1

Answer 1

您所描述的内容听起来像是编辑器实例没有正确关闭。这就是您第二次打开表单时tinymce 未初始化的原因。 您可以在 mceEnd() 函数中尝试此代码并告诉我们会发生什么

for (var i = 0; i < tinymce.editors.length; i++) {
   tinyMCE.execCommand("mceRemoveControl", false, tinymce.editors[i].id);
}

编辑： 解决方法： 我建议您尝试以下方法并告诉我是否有帮助。这应该使您能够再次打开表单，但不会删除 mceEnd() 上的 js 错误。

// global variable in script on top of the page
var editor_count = 0;

function mceAdd(){
    document.getElementById('htmlarea').setAttribute('id', 'htmlarea'+editor_count);
    tinyMCE.execCommand("mceAddControl", false, 'htmlarea'+editor_count);
}

function mceEnd(){
    editor_count++;
    // will throw js-error but hopefully this won't hinder us to reinitialize a second form
    tinyMCE.execCommand("mceRemoveControl", false, "htmlarea"+(editor_count-1) );
}