TinyMCE与fancybox交互错误

Question

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

当我第一次打开表单（表单通过fancybox显示）时，一切都按预期工作； 如果我取消该操作并尝试再次打开表单，文本区域将被禁用，但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() 函数时，我收到“组件返回失败代码：0x8000ffff (NS_ERROR_UNEXPECTED) [nsIDOMHTMLDocument.implementation]”。

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

更新：

尝试了 Thariama 的功能，结果如下： 如果我不使用 fancybox 中的任何内容（只需打开它并关闭它），我会收到“组件返回失败代码：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) );
}