javascript - 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() 函数时，我得到一个“Component returned failure code: 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) );
}