移動CKEditor節點時Javascript DOM失敗

我需要能夠在我的網頁中交換CKEditor富文本區域。我的當前腳本在沒有應用CKEditor的情況下效果很好，但是在應用CKEditor時沒有成功移動文本區域（和輸入的文本）。下面是一些代碼（它需要CKEditor的工作）：移動CKEditor節點時Javascript DOM失敗

<html> 
<head> 
    <title>Sample - CKEditor</title> 
    <script type="text/javascript" src="/ckeditor/ckeditor.js"></script> 
</head> 
<body> 
    <form method="post"> 
     <p> 
      My Editor:<br /> 
     <a href="#" onclick="swap(this.parentNode.nextSibling.nextSibling, this.parentNode)">first link</a> 
      <textarea name="editor1">&lt;p&gt;Initial value.&lt;/p&gt;</textarea> 
      <script type="text/javascript"> 
       CKEDITOR.replace('editor1'); 
      </script> 
     </p> 
     <p> 
      My Editor2:<br /> 
      <textarea name="editor2">&lt;p&gt;Initial value2.&lt;/p&gt;</textarea> 
      <script type="text/javascript"> 
       CKEDITOR.replace('editor2'); 
      </script> 
     </p> 
     <p> 
      <input type="submit" /> 
     </p> 
    </form> 
</body> 
</html> 
<script> 
    function swap(from, to){ 
    if(from && to){ 
     var parent = from.parentNode; 
     var t; 
     if(parent){ 
     t = parent.removeChild(from); 
     parent.insertBefore(t, to); 
     t = null; 
     } 
     delete(t); 
     delete(parent); 
    } 
    } 
</script>

如果您註釋掉CKEDITOR.replace（）調用，沒有任何問題做交換。有關我如何解決這個問題的任何建議？謝謝。

來源

2010-04-20 Jon

原來，這是一個錯誤。 http://cksource.com/forums/viewtopic.php?t=18417

來源

2010-04-20 21:43:04 Jon

你必須摧毀情況下，做你的DOM的舉動，然後申請再次CKEDITOR

像

 var target = $(evt.target).closest('.root'); 
     var next = target.next(); 
     var cke = target.find('.cke').attr('id') 

      cke = cke.replace('cke_',''); 
      CKEDITOR.instances[cke].destroy(); 
      var cke = next.find('.cke').attr('id') 
      cke = cke.replace('cke_',''); 
      CKEDITOR.instances[cke].destroy(); 

      next.after(target); 

      CKEDITOR.replace($('textarea' , target)[0] ,{height: '250px'}); 
      CKEDITOR.replace($('textarea' , next)[0] ,{height: '250px'});

來源

2013-04-15 10:15:59

這裏是我的方法，使用jQuery。我的背景：我想在「div2」之後移動「div1」。每個DIV包含一個帶CKEditor的textarea。

<div id="div1"><textarea id="txt1">Bla bla</textarea></div> 
 
<div id="div2"><textarea id="txt2">Lorem ipsum</textarea></div> 
 
<script> 
 
    CKEDITOR.replace('txt1'); 
 
    CKEDITOR.replace('txt2'); 
 
</script>

然後，移動「DIV1」「DIV2」之後：

<script> 
 
    var current = $('#div1'); 
 
    var next = current.next();//Same as $("div2") 
 

 
    //Remove instance of CKE 
 
    //but first, get the data from the wysiwyg editor 
 
    //(what you have typed can be lost) 
 
    var CKEinstance1 = CKEDITOR.instances['txt1']; 
 
    $('#txt1').html(CKEinstance1.getData()); 
 
    CKEDITOR.remove(CKEinstance1); 
 

 
    //Also remove the wysiwyg from the DOM 
 
    //Its ID is always prefixed by "cke_" and followed by the textarea ID 
 
    $('#cke_txt1').remove(); 
 
    
 
    //Move Div1 after Div2 
 
    current.insertAfter(next); 
 

 
    //Rebind CKE to txt1 
 
    CKEDITOR.replace('txt1'); 
 
</script>

來源

2014-11-19 18:55:34 FragBis

而不是手動刪除CKEditor的DOM，你應該銷燬像norbertas.gaulia實例這樣你就可以避免將編輯器數據保存在內存中。 – AlfonsoML 2014-11-19 19:46:49

移動CKEditor節點時Javascript DOM失敗

回答

相關問題