TinyMCE和fancybox交互错误

TinyMCE and fancybox interaction error

本文关键字：交互错误 fancybox TinyMCE      更新时间：2023-09-26

我试图使用tinyMCE上的文本区域，我使用jquery fancybox显示。我试过使用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(只是打开它并关闭它)我得到一个"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

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

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

EDIT:我建议你试试下面的方法，然后告诉我是否有用。这将使您能够打开表单第二次，但不会消除在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) );
}
相关文章：