2012-03-27 37 views
3

我向tinyMCE的用戶提交了一個bug,但是我希望有人遇到過這個問題,並且有一個合適的解決方法。Firefox和TinyMCE 3.4.9在一起玩不好

這是的情況: 我有一個窗體與tinyMCE控件,我加載到一個jQuery對話框。它在第一時間效果很好,然後關閉它並開啓新的。任何與tinyMCE控件的交互都會給出:

"Node cannot be used in a document other than the one in which it was created" 

它也不會用它應該預先填充的文本來填充控件。

在我的jQuery的對話,我有我的beforeClose處理以下腳本:

if (typeof tinyMCE != 'undefined') { 
       $(this).find(':tinymce').each(function() { 
        var theMce = $(this); 

        tinyMCE.execCommand('mceFocus', false, theMce.attr('id')); 
        tinyMCE.execCommand('mceRemoveControl', false, theMce.attr('id')); 
        $(this).remove(); 
       }); 
      } 

,這裏是我的TinyMCE的安裝腳本:

$('#' + controlId).tinymce({ 
     script_url: v2ScriptPaths.TinyMCEPath, 
     mode: "none", 
     elements: controlId, 
     theme: "advanced", 
     plugins: "paste", 
     paste_retain_style_properties: "*", 
     theme_advanced_toolbar_location: "top", 
     theme_advanced_buttons1: "bold, italic, underline, strikethrough, separator, justifyleft, justifycenter, justifyright, justifyfull, indent, outdent, separator, undo, redo, separator, numlist, bullist, hr, link, unlink,removeformat", 
     theme_advanced_buttons2: "fontsizeselect, forecolor, backcolor, charmap, pastetext,pasteword,selectall, sub, sup", 
     theme_advanced_buttons3: "", 
     language: v2LocalizedSettings.languageCode, 
     gecko_spellcheck : true, 
     onchange_callback: function (editor) { 
      tinyMCE.triggerSave(); 
     }, 
     setup: function (editor) { 
      editor.onInit.add(function (editor, event) { 
       if (typeof v2SetInitialContent == 'function') { 
        v2SetInitialContent(); 
       } 
      }) 
     } 
    }); 

有什麼明顯的在這裏?我已經把所有複雜的刪除東西在關閉b/c tinymce不喜歡有它的HTML刪除沒有被刪除。

setInitialContent()的東西就是這樣,我可以預先加載它與他們的電子郵件簽名,如果他們有一個。它有或沒有代碼,所以這不是問題。

我被迫更新到3.4.9,因爲這個問題:

http://www.tinymce.com/forum/viewtopic.php?id=28400

所以如果有人能解決這個問題,這將有助於這種情況。我試過這個建議,但沒有運氣。

編輯:我原本以爲這隻影響到Firefox 11,但我已經下載了10,並且它也受到了影響。

編輯:好吧,我已經修剪了所有我複雜的動態窗體和鏈接,導致這成爲一個相當簡單的例子。

的基本頁面代碼:

<a href="<%=Url.Action(MVC.Temp.GetRTEDialogContent)%>" id="TestSendEmailDialog">Get Dialog</a> 
<div id="TestDialog"></div> 
<script type="text/javascript"> 
    $('#TestSendEmailDialog').click(function (e) { 
     e.preventDefault(); 

     var theDialog = buildADialog('Test', 500, 800, 'TestDialog'); 
     theDialog.dialog('open'); 
     theDialog.empty().load($(this).attr('href'), function() { 

     }); 

    }); 

    function buildADialog(title, height, width, dialogId, maxHeight) { 
     var customDialog = $('#' + dialogId); 

     customDialog.dialog('destory'); 

     customDialog.dialog({ 
      title: title, 
      autoOpen: false, 
      height: height, 
      modal: true, 
      width: width, 
      close: function (ev, ui) { 

       $(this).dialog("destroy"); 
       $(this).empty(); 

      }, 
      beforeClose: function (event, ui) { 

       if (typeof tinyMCE != 'undefined') { 
        $(this).find(':tinymce').each(function() { 
         var theMce = $(this); 

         tinyMCE.execCommand('mceFocus', false, theMce.attr('id')); 
         tinyMCE.execCommand('mceRemoveControl', false, theMce.attr('id')); 
         $(this).remove(); 
        }); 
       } 

      } 
     }); 

     return customDialog; 

    } 

</script> 

,並加載到該對話框的網頁代碼:

<form id="SendAnEmailForm" name="SendAnEmailForm" enctype="multipart/form-data" method="post"> 
    <textarea cols="50" id="MessageBody" name="MessageBody" rows="10" style="width: 710px; height:200px;"></textarea> 
</form> 

<script type="text/javascript"> 

    $(function() { 
     $('#MessageBody').tinymce({ 
      script_url: v2ScriptPaths.TinyMCEPath, 
      mode: "exact", 
      elements: 'MessageBody', 
      theme: "advanced", 
      plugins: "paste, preview", 
      paste_retain_style_properties: "*", 
      theme_advanced_toolbar_location: "top", 
      theme_advanced_buttons1: "bold, italic, underline, strikethrough, separator, justifyleft, justifycenter, justifyright, justifyfull, indent, outdent, separator, undo, redo, separator, numlist, bullist, hr, link, unlink,removeformat", 
      theme_advanced_buttons2: "fontsizeselect, forecolor, backcolor, charmap, pastetext,pasteword,selectall, sub, sup, preview", 
      theme_advanced_buttons3: "", 
      language: 'EN', 
      gecko_spellcheck: true, 
      onchange_callback: function (editor) { 
       tinyMCE.triggerSave(); 
      } 
     }); 
    }); 

</script> 

一個很有趣的事情,我注意到,如果我移動了tinyMCE設置到負載回調,它似乎工作。這不是一個真正的解決方案,因爲當我加載對話框時,我不知道在代碼中提前是否有tinyMCE控件!

回答

0

我解決了這個問題,將tinyMCE設置移入一個函數,然後在我的load()調用中檢查該函數是否存在,然後調用它。

不是最好的解決方案,但它的工作原理。

相關問題