11

我遇到了 CKEditor 4 和 jQuery UI 的可排序方法的问题，如果我对具有 CKEditor 实例的容器进行排序，它会删除该值并抛出错误“未捕获的类型错误：无法调用未定义的方法 'getSelection'”。它还使编辑器无法编辑。我能够在 CKEditor 3 中通过以下技巧之一解决这个问题： CKEditor freezes on jQuery UI Reorder

在查看 Chrome DOM 检查器时，似乎 iframe 的内容已被删除。

下面是粗略的测试代码：

    <html>
    <头部>
        <title>测试</title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/jquery-ui.min.js"></script>
        <script src="ckeditor.js"></script>
        <script type="text/javascript">
        $(函数(){

            var tmpStore = {};
            $('#sortable').sortable({
                光标：'移动'，

                // 用于在 V3 上工作但不适用于 V4 的黑客：
                // https://stackoverflow.com/questions/3379653/ckeditor-freezes-on-jquery-ui-reorder
                开始：函数（事件，ui）{
                    $('textarea').each(function(){
                        var id = $(this).attr('id');
                        tmpStore[id] = CKEDITOR.instances[id].getData();
                    })
                 },
                停止：函数（事件，用户界面）{
                    $('textarea').each(function(){
                        var id = $(this).attr('id');
                        CKEDITOR.instances[id].setData(tmpStore[id]);
                    })
                  }
            });
            $('textarea').each(function(){
                var ckId = $(this).attr('id');
                配置 = {};
                CKEDITOR.replace(ckId, 配置);
            })
        })

        
        
        li { 填充：10px; 宽度：800 像素；高度：300px；}
        
    </head>
    <正文>
        <ul id="可排序">
            <li><textarea id="test1" name="test1">test1</textarea></li>
            <li><textarea id="test2" name="test1">test2</textarea></li>
            <li><textarea id="test3" name="test1">test3</textarea></li>
        </ul>
    </正文>
    </html>
4

7 回答 7

5

我遇到了同样的问题，并根据此处的答案进行了修复。请看下面的小提琴

问题： https ://jsfiddle.net/33qt24L9/1/

  $(function() {
        $( "#sortable" ).sortable({
      placeholder: "ui-state-highlight"
    });

       CKEDITOR.replace( 'editor1' );
       CKEDITOR.replace( 'editor2' );
       CKEDITOR.replace( 'editor3' );
       CKEDITOR.replace( 'editor4' );

  });

已解决的问题：https ://jsfiddle.net/57djq2bh/2/

  $(function() {
        $( "#sortable" ).sortable({
      placeholder: "ui-state-highlight",

             start: function (event, ui) 
        {
            var id_textarea = ui.item.find(".ckeditor").attr("id");
            CKEDITOR.instances[id_textarea].destroy();
        },
        stop: function (event, ui) 
        {
            var id_textarea = ui.item.find(".ckeditor").attr("id");
            CKEDITOR.replace(id_textarea);
        }           

    });

       CKEDITOR.replace( 'editor1' );
       CKEDITOR.replace( 'editor2' );
       CKEDITOR.replace( 'editor3' );
       CKEDITOR.replace( 'editor4' );

  });

编辑：如果像我一样，每个编辑器都有单独的配置，这里更新的代码会有所帮助：

start: function (event, ui)
        {
            $('.wysiwyg', ui.item).each(function(){
                var tagId = $(this).attr('id');
                var ckeClone = $(this).next('.cke').clone().addClass('cloned');
                ckeConfigs[tagId] = CKEDITOR.instances[tagId].config;
                CKEDITOR.instances[tagId].destroy();
                $(this).hide().after(ckeClone);
            });
        },

        stop: function(event, ui) {
            // for each textarea init ckeditor anew and remove the clone
            $('.wysiwyg', ui.item).each(function(){
                var tagId = $(this).attr('id');
                CKEDITOR.replace(tagId, ckeConfigs[tagId]);
                $(this).next('.cloned').remove();
            });
        }

感谢：https ://github.com/trsteel88/TrsteelCkeditorBundle/issues/53

于 2015-07-30T12:59:36.583 回答
3

一旦底层 DOM 结构被修改，您必须重新创建 CKEditor。创建新实例后，使用editor.getData()之前保存编辑器数据editor.destroy()并使用恢复内容。editor.setData( data )由于 CKEditor 强烈依赖 DOM 结构，因此没有其他方法可以解决此问题。

于 2013-02-28T12:17:46.267 回答
2

删除 CKEditor 开始排序

var ckeConfigs = [];
$('.ui-sortable').sortable({
 start:function (event,ui) {
  $('.lineItemCommentBox', ui.item).each(function(){
    var tagId = $(this).attr('id');
        ckeConfigs[tagId] = CKEDITOR.instances[tagId].config;
    CKEDITOR.instances[tagId].destroy();
  });
 },
 stop: function(event, ui) {
  $('.lineItemCommentBox', ui.item).each(function(){
   var tagId = $(this).attr('id');
   CKEDITOR.replace(tagId, ckeConfigs[tagId]);
  });
 }
});
于 2019-02-25T13:33:39.627 回答
1

下面的代码对我有用，我们必须在启动时销毁编辑器，并在拖动结束时重新创建它，获取来自数据的 textarea 的值：

jQuery(function($) 
{
    var panelList = $("#nameofyourdiv");
    panelList.sortable(
    {
        handle: ".classofyourdivforsorting", 
        start: function (event, ui) 
        {
            var id_textarea = ui.item.find("textarea").attr("id");
            CKEDITOR.instances[id_textarea].destroy();
        } 
        stop: function (event, ui) 
        {
            var id_textarea = ui.item.find("textarea").attr("id");
            CKEDITOR.replace(id_textarea);
        }           
    });
});

希望它可以帮助某人。

于 2015-02-11T07:42:21.843 回答
0

我已经通过在打开 jquery 对话框后实例化 CKEditor 来解决此类问题

于 2014-02-26T09:33:18.280 回答
0

我遇到了与 CKEDITOR 类似的问题，下面的代码对我有用。销毁 Ckeditor 实例并删除 Ckeditor 并在拖动结束时再次用 Ckeditor 替换当前文本区域

 $("#sortable").sortable({
        items: '.dynamic',
        start: function (event , ui) {

                var editorId = $(ui.item).find('.ckeditor').attr('id');// get the id of your Ckeditor
                editorInstance = CKEDITOR.instances[editorId]; // Get the Ckeditor Instance
                editorInstance.destroy(); // Destroy it
                CKEDITOR.remove(editorId);// Remove it

        },
        stop: function(event, ui) { 
                var editorId = $(ui.item).find('.ckeditor').attr('id');// Get the Id of your Ckeditor 
                CKEDITOR.replace(editorId);// Replace it
            }
        } 

    });
    $("#sortable").disableSelection();

这里#sortable是可排序的DIV的ID，' .dynamic' 是分配给有资格排序的DIV 的类，'.ckeditor'是Textarea 的类。

我从这里得到了我的解决方案，希望这对将来的某人有所帮助。

于 2015-05-22T10:38:11.737 回答
-1

我只是使用 ckeditorOff() 和 ckeditorOn() 函数在移动过程中保留数据和重新/取消实例化 ckeditor 实例。

$('#sortable').sortable({
    cursor: 'move',
    start:function (event,ui) {
        if(typeof ckeditorOff=='function')ckeditorOff();
    },
    stop: function(event, ui) { 
        if(typeof ckeditorOn=='function')ckeditorOn();
    } 
});

我typeof ckeditorOff声明使代码与 ckeditor 的未来版本兼容，以防他们决定删除这两个函数。

于 2013-06-15T12:42:59.983 回答