移动 CKEditor 节点时 Javascript DOM 失败

发布于 2024-08-29 13:21:58 字数 1595 浏览 8 评论 0原文

我需要能够在整个网页上交换 CKEditor 富文本区域。我当前的脚本在未应用 CKEditor 时效果很好，但在应用 CKEditor 时无法成功移动文本区域（和输入的文本）。这是一些代码（它需要 ckeditor 才能工作）：

<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() 调用，则进行交换没有问题。关于如何解决这个问题有什么建议吗？谢谢。

原文

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"><p>Initial value.</p></textarea>
            <script type="text/javascript">
                CKEDITOR.replace( 'editor1' );
            </script>
        </p>
        <p>
            My Editor2:<br />
            <textarea name="editor2"><p>Initial value2.</p></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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

笑梦风尘 2024-09-05 13:21:58

事实证明这是一个错误。 http://cksource.com/forums/viewtopic.php?t=18417

回复收藏 0 原文

余生一个溪 2024-09-05 13:21:58

你必须销毁你的 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'});

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

回复收藏 0 原文

随梦而飞# 2024-09-05 13:21:58

这是我的方法，使用 jQuery。
我的上下文：我想将“div1”移到“div2”之后。每个 DIV 都包含一个带有 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>

然后，将“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>

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>

回复收藏 0 原文

~没有更多了~