CODEWITHSUNDEEP
javascripthtmlckeditorfckeditor
Jon
Jon

Reputation: 471

Javascript DOM failing when moving a CKEditor node

I need to be able to swap CKEditor rich text areas throughout my webpage. My current script works great when there's no CKEditor applied, but does not successfully move the text area (and entered text) when CKEditor is applied. Here's some code(it needs ckeditor to work):

<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>

If you comment out the CKEDITOR.replace() calls, there's no problem doing the swap. Any suggestions for how I can fix this? Thanks.

Upvotes: 0

Views: 2614

Answers (3)

FragBis
FragBis

Reputation: 19

Here is my method, using jQuery. My context: I want to move "div1" after "div2". Each DIV contains a textarea with CKEditor.

<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>

Then, to move "div1" after "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>

Upvotes: 1

Norbertas.Gaulia
Norbertas.Gaulia

Reputation: 2152

You have to destroy instances do your dom move and then apply CKEDITOR again

something like

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

Upvotes: 1

Jon
Jon

Reputation: 471

Turns out it's a bug. http://cksource.com/forums/viewtopic.php?t=18417

Upvotes: 2

Related Questions