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)); 
}