TinyMCE和fancybox交互错误

Question

我想在我使用jquery fancybox显示的textarea上使用tinyMCE。我尝试过使用tinyMCE jQuery插件，tinyMCE的默认下载版本和tinyMCE的完整下载版本。我第一次打开窗体（窗体通过fancybox显示），一切按预期工作; 如果我取消操作并尝试再次打开窗体，textarea被禁用，但tinyMCE控件仍然显示，只有它们不起作用。

这是我使用的表单的代码。

<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()内运行它通过的fancybox所示声明。

我已经读了很多关于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”错误使用

版本：3.4.7 TinyMCE的，jQuery的1.3.4的fancybox和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)); 
}