11

CKEditor 4 と jQuery UI のソート可能なメソッドで問題が発生しました。ここで、CKEditor インスタンスを持つコンテナをソートすると、値が削除され、「Uncaught TypeError: 未定義のメソッド 'getSelection' を呼び出せません」というエラーがスローされます。また、エディターを編集できなくなります。ここで見つかった次のハックのいずれかを使用して、CKEditor 3 でこれを回避することができました 。

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
                start:function (イベント,ui) {
                    $('テキストエリア').each(関数(){
                        var id = $(this).attr('id');
                        tmpStore[id] = CKEDITOR.instances[id].getData();
                    }))
                 }、
                停止：関数（イベント、UI）{
                    $('テキストエリア').each(関数(){
                        var id = $(this).attr('id');
                        CKEDITOR.instances[id].setData(tmpStore[id]);
                    }))
                  }
            });
            $('テキストエリア').each(関数(){
                var ckId = $(this).attr('id');
                構成 = {};
                CKEDITOR.replace(ckId、構成);
            }))
        }))

        
        
        李 { パディング: 10px; 幅: 800px; 高さ: 300px; }
        
    </head>
    <本体>
        <ul id="ソート可能">
            <li><textarea id="test1" name="test1">テスト1</textarea></li>
            <li><textarea id="test2" name="test1">test2</textarea></li>
            <li><textarea id="test3" name="test1">test3</textarea></li>
        </ul>
    </body>
    </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 に答える
1

以下のコードは私にとってはうまくいきます。開始時にエディターを破棄し、ドラッグが終了したときにデータを取得するテキストエリアの値を取得して再作成する必要があります。

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

私は 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 に答える