CKEditorインスタンスはすでに存在します

フォームを表示するためにjqueryダイアログを使用しています（AJAX経由で取得）。一部のフォームでは、テキストエリアにCKEditorを使用しています。エディターは、最初のロードで正常に表示されます。

ユーザーがダイアログをキャンセルすると、コンテンツが削除され、後のリクエストでコンテンツが新しく読み込まれます。問題は、ダイアログがリロードされると、CKEditorがエディターがすでに存在していると主張することです。

uncaught exception: [CKEDITOR.editor] The instance "textarea_name" already exists.

APIには既存のエディターを破棄するためのメソッドが含まれており、これが解決策であると主張する人々を見てきました。

if (CKEDITOR.instances['textarea_name']) {
CKEDITOR.instances['textarea_name'].destroy();
}
CKEDITOR.replace('textarea_name');

代わりに新しいエラーが表示されるため、これは私にとっては機能しません。

TypeError: Result of expression 'i.contentWindow' [null] is not an object.

このエラーは、「replace（）」ではなく「destroy（）」で発生するようです。誰かがこれを経験し、別の解決策を見つけましたか？

既存のエディターを破棄して置き換えるのではなく、「再レンダリング」することは可能ですか？

更新これ は同じ問題を扱う別の質問ですが、彼はダウンロード可能なテストケースを提供しました。

これを機能させるには、インスタンスを破棄するときにブール型パラメーターtrueを渡す必要があります。

    var editor = CKEDITOR.instances[name];
    if (editor) { editor.destroy(true); }
    CKEDITOR.replace(name);

function loadEditor(id)
{
    var instance = CKEDITOR.instances[id];
    if(instance)
    {
        CKEDITOR.remove(instance);
    }
    CKEDITOR.replace(id);
}

私もこの問題を抱えていましたが、もっと簡単に解決しました...

私はjQueryスクリプトで「ckeditor」クラスを、CKEditorに使用したいテキストエリアのセレクターとして使用していました。デフォルトのckeditor JSスクリプトもこのクラスを使用して、CKEditorに使用するテキストエリアを識別します。

これは、私のjQueryスクリプトとデフォルトのckeditorスクリプトの間に矛盾があることを意味しました。

私は単にtextareaのクラスとjQueryスクリプトを 'do_ckeditor'に変更しました（ "ckeditor"以外は何でも使用できます）が機能しました。

これは私のために働いた最も簡単な（そして唯一の）解決策です：

if(CKEDITOR.instances[editorName])
   delete CKEDITOR.instances[editorName];
CKEDITOR.replace(editorName);

配列内のこのエントリを削除すると、このフォームの安全性チェックによってアプリケーションが破壊されるのを防ぐことができます。

destroy（）とremove（）は私にとってはうまくいきませんでした。

多分これはあなたを助けるでしょう-私は不明な数のckeditorオブジェクトをロードしていることを除いて、jqueryを使用して同様のことを行いました。これにつまずくのにしばらく時間がかかりました-ドキュメントでは明確ではありません。

function loadEditors() {
    var $editors = $("textarea.ckeditor");
    if ($editors.length) {
        $editors.each(function() {
            var editorID = $(this).attr("id");
            var instance = CKEDITOR.instances[editorID];
            if (instance) { instance.destroy(true); }
            CKEDITOR.replace(editorID);
        });
    }
}

そして、これは私がエディターからコンテンツを取得するために実行するものです：

    var $editors = $("textarea.ckeditor");
    if ($editors.length) {
        $editors.each(function() {
            var instance = CKEDITOR.instances[$(this).attr("id")];
            if (instance) { $(this).val(instance.getData()); }
        });
    }

更新：私は正しい方法を使用するように私の答えを変更しました-.destroy（）です。.remove（）は内部用であり、ある時点で不適切に文書化されていました。

ajaxを介してロードされたコンテンツに対してCKeditorのインスタンスをいくつか作成していた場合、同様の問題が発生しました。

CKEDITOR.remove（）

DOMをメモリに保持し、すべてのバインディングを削除しませんでした。

CKEDITOR.instance [instance_id] .destroy（）

ajaxからの新しいデータで新しいインスタンスを作成するたびに、エラーi.contentWindowエラーが発生しました。しかし、これは、DOMをクリアした後でインスタンスを破棄していることに気づくまでしかありませんでした。

インスタンスとそのDOMがページ上にあるときにdestroy（）を使用すると、完全に正常に動作します。

ajaxリクエストの場合、

 for(k in CKEDITOR.instances){
    var instance = CKEDITOR.instances[k];
    instance.destroy()
 }
  CKEDITOR.replaceAll();

これにより、ドキュメントからすべてのインスタンスが削除されます。次に、新しいインスタンスを作成します。

var e= CKEDITOR.instances['sample'];
e.destroy();
e= null;

このi.contentWindow is nullエラーは、DOMに存在しないtextareaに関連付けられていたエディターインスタンスでdestroyを呼び出すと発生するようです。

CKEDITORY.destroyパラメータを取りますnoUpdate。

APIdocは次のように述べています。

インスタンスがDOM要素を置き換える場合、このパラメーターは、要素をインスタンスの内容で更新するかどうかを示します。

したがって、エラーを回避するには、DOMからtextarea要素を削除する前にdestroyを呼び出すか、destory（true）を呼び出して、存在しないDOM要素を更新しないようにします。

if (CKEDITOR.instances['textarea_name']) {
   CKEDITOR.instances['textarea_name'].destroy(true);
}

（jQueryアダプターでバージョン3.6.2を使用）

これは私のために働いたものです：

for(name in CKEDITOR.instances)
{
  CKEDITOR.instances[name].destroy()
}

CKEDITOR.instances = new Array();

インスタンスを作成する呼び出しの前にこれを使用しています（ページの読み込みごとに1つ）。これがメモリ処理にどのように影響するか、そして何が影響しないかは不明です。これは、ページ上のすべてのインスタンスを置き換えたい場合にのみ機能します。

上記のすべてのコードに基づいて独自のソリューションを用意しました。

      $("textarea.ckeditor")
      .each(function () {

                var editorId = $(this).attr("id");

                try {    
                    var instance = CKEDITOR.instances[editorId];
                    if (instance) { instance.destroy(true); }

                }
                catch(e) {}
                finally {
                    CKEDITOR.replace(editorId);
                }
            });

それは私にとって完璧に機能します。

AJAXリクエストの後、間違ったDOM構造がある場合があります。インスタンスの場合：

<div id="result">
   <div id="result>
   //CONTENT
   </div>
</div>

これも問題を引き起こし、ckEditorは機能しません。したがって、DOM構造が正しいことを確認してください。

インスタンスにも同じ問題があり、どこにいても見ていましたが、最後にこの実装でうまくいきました。

    //set my instance id on a variable

    myinstance = CKEDITOR.instances['info'];

    //check if my instance already exist

    if (myinstance) { 
        CKEDITOR.remove(info)
    }

    //call ckeditor again

    $('#info').ckeditor({
        toolbar: 'Basic',
        entities: false,
        basicEntities: false
    });

ckeditorのremoveメソッドを使用して、任意のckeditorインスタンスを削除できます。インスタンスは、textareaのIDまたは名前になります。

if (CKEDITOR.instances[instance_name]) {
    CKEDITOR.remove(CKEDITOR.instances[instance_name]);
}

実際、コードから「.ckeditor」クラスを削除すると、問題が解決します。私たちのほとんどは、ckeditorのドキュメントにあるjQuery統合の例に従いました。

$('.jquery_ckeditor')
.ckeditor( function() { /* callback code */ }, { skin : 'office2003' } );

そして「...たぶん私は単に 'または' .jquery_ 'の部分を取り除くことができる」と思った。

問題が他の場所から発生している間、（{skin： 'office2003'}が実際に機能したため）コールバック関数の微調整に時間を費やしてきました。

ドキュメントには、「ckeditor」をクラス名として使用することはお勧めできません。これは予約キーワードであるためです。

乾杯。

私は、それをもう学びました

CKEDITOR.instances [editorName]を削除します。

単独で、実際にインスタンスを削除しました。私が読んだり見たりした他のすべての方法（ユーザーからのスタックオーバーフローでここに見つかったものを含む）は、私にとってはうまくいきませんでした。

私の状況では、私はajax呼び出しを使用して、との周りにラップされたコンテンツのコピーをプルします。問題は、jQuery .liveイベントを使用して「このドキュメントを編集」リンクをバインドし、ajaxロードの成功後にckeditorインスタンスを適用していることが原因です。つまり、別の.liveイベントのリンクをクリックして別のリンクをクリックすると、コンテンツウィンドウをクリア（フォームを保持）し、保持されているコンテンツを再取得するタスクの一部として、削除CKEDITOR.instances [editorName]を使用する必要があります。データベースまたはその他のリソース。

私はjQueryダイアログで同じ問題を抱えていました。

以前のデータを削除したいだけなのに、なぜインスタンスを破棄するのですか？

function clearEditor(id)
{
  var instance = CKEDITOR.instances[id];
  if(instance)
  {
    instance.setData( '' );
  }
}

destroy / replaceの代わりにすべてのインスタンスの名前を変更することを選択しました。時々、AJAXでロードされたインスタンスがページのコアにあるインスタンスを実際に置き換えないためです... RAMにより多く保持しますが、このように競合を減らします。

    if (CKEDITOR && CKEDITOR.instances) {
        for (var oldName in CKEDITOR.instances) {
            var newName = "ajax"+oldName;
            CKEDITOR.instances[newName] = CKEDITOR.instances[oldName];
            CKEDITOR.instances[newName].name = newName;
            delete CKEDITOR.instances[oldName];
        }
    }

私はダイアログを生成するコントロールを制御しなければならない状況にあります、それらのそれぞれはこれらのダイアログの中に埋め込まれたckeditorを持っている必要があります。また、テキスト領域が同じIDを共有することも起こります。（通常これは非常に悪い習慣ですが、割り当てられたアイテムと割り当てられていないアイテムの2つのjqGridがあります。）それらはほぼ同じ構成を共有します。したがって、私は両方を構成するために共通のコードを使用しています。

したがって、行を追加するため、または編集するために、いずれかのjqGridからダイアログをロードすると、すべてのテキストエリアでCKEDITORのすべてのインスタンスを削除する必要があります。

$('textarea').each(function()
{
    try 
    {
        if(CKEDITOR.instances[$(this)[0].id] != null)
        {
            CKEDITOR.instances[$(this)[0].id].destroy();
        }
    }
    catch(e)
    {

    }
});

これはすべてのテキストエリアをループし、CKEDITORインスタンスがある場合はそれを破棄します。

または、純粋なjQueryを使用する場合：

$('textarea').each(function()
{
    try 
    {
        $(this).ckeditorGet().destroy();
    }
    catch(e)
    {

    }
});

削除class="ckeditor"、それはckeditorの初期化を引き起こしたかもしれません

null参照例外が発生し、エディタに「null」という単語が表示されるという同じ問題がありました。エディターを3.4.1にアップグレードして役に立たないようにするなど、いくつかの解決策を試しました。

ソースを編集する必要がありました。_source \ plugins \ wysiwygarea \ plugin.jsの約416行目から426行目に、次のようなスニペットがあります。

iframe = CKEDITOR.dom.element.createFromHtml( '&lt;iframe' + ... + '></iframe>' );

少なくともFFでは、iframeは必要なときに完全にインスタンス化されるわけではありません。その行の後の残りの関数をsetTimeout関数で囲みました。

iframe = CKEDITOR.dom.element.createFromHtml( '<iframe' + ... + '></iframe>' );
setTimeout(function()
{ 
    // Running inside of Firefox chrome the load event doesn't bubble like in a normal page (#5689)
    ...
}, 1000);

};

// The script that launches the bootstrap logic on 'domReady', so the document
...

テキストが一貫してモーダルダイアログに表示されるようになりました。

同じ（同じフォームが再度呼び出されます）または異なるID（以前にアンロードされたフォーム）のテキストエリアを含むフォーム（ページ間の更新なし）の動的（Ajax）ロードをサポートし、それらをCKEditor要素に変換するには、次のようにしました（JQueryを使用）アダプタ）：

変換するtextareaを配信するすべてのAjax呼び出しがページで完了したら、次の関数を呼び出します。

setupCKeditor()

これは次のようになります（RTEに変換されるテキストエリアがclass = "yourCKClass"であると想定しています）：

    /* Turns textAreas into TinyMCE Rich Text Editors where
 * class: tinymce applied to textarea.
 */
function setupCKeditor(){

    // define editor configuration      
    var config = {skin : 'kama'};

    // Remove and recreate any existing CKEditor instances
    var count = 0;
    if (CKEDITOR.instances !== 'undefined') {
        for(var i in CKEDITOR.instances) {

            var oEditor   = CKEDITOR.instances[i];
            var editorName = oEditor.name;

             // Get the editor data.
            var data = $('#'+editorName).val();

            // Check if current instance in loop is the same as the textarea on current page
            if ($('textarea.yourCKClass').attr('id') == editorName) {
                if(CKEDITOR.instances[editorName]) {

                    // delete and recreate the editor
                    delete CKEDITOR.instances[editorName];
                    $('#'+editorName).ckeditor(function() { },config);
                    count++;

                }
            }   


        }
    }

    // If no editor's exist in the DOM, create any that are needed.             
    if (count == 0){

        $('textarea.yourCKClass').each( function(index) {

                var editorName = $(this).attr('id');
                $('#'+editorName).ckeditor(function() { $('#'+editorName).val(data); },config);

            });

    }


}

私はその行に言及する必要があります：

$('#'+editorName).ckeditor(function() { $('#'+editorName).val(data); },config);

簡単にできる（そしてそうすべきである）：

$('#'+editorName).ckeditor(function() { },config);

しかし、エディターはしばしばロード後に正しいコンテンツを1秒間表示し、目的のコンテンツのエディターを空にすることがわかりました。そのため、コールバックコードを含むその行により、CKEditorのコンテンツは元のtextareaコンテンツと同じになります。使用するとちらつきが発生します。使用しない場合は、使用してください。

ジャックボバーグとまったく同じ問題がありました。私はjqueryダイアログに動的フォームを読み込んでから、さまざまなウィジェット（datepicker、ckeditorsなど）をアタッチしていました。上記の解決策をすべて試しましたが、どれもうまくいきませんでした。

何らかの理由で、ckeditorは最初にフォームをロードしたときだけ添付しましたが、2回目には、jackbobergとまったく同じエラーメッセージが表示されました。

コードを分析したところ、フォームのコンテンツがまだダイアログに配置されていないときに「空中」でckeditorをアタッチすると、ckeditorがバインディングを正しくアタッチしないことがわかりました。これは、ckeditorが「空中」でアタッチされているため、2回目に「空中」でアタッチすると... poof ...最初のインスタンスがDOMから適切に削除されなかったため、エラーがスローされます。

これはエラーを引き起こした私のコードでした：

var $content = $(r.content); // jQuery can create DOM nodes from html text gotten from <xhr response> - so called "mid-air" DOM creation
$('.rte-field',$content).ckeditor(function(){});
$content.dialog();

これは機能した修正です：

var $content = $(r.content).dialog(); // first create dialog
$('.rte-field',$content).ckeditor(function(){}); // then attach ckeditor widget

私はこれとまったく同じことに遭遇し、問題はwordcountプラグインの初期化に時間がかかりすぎることでした。30秒以上。ユーザーはckeditorを表示しているビューをクリックしてからキャンセルし、それによって新しいページをdomにajaxロードします。プラグインは、iframeまたはcontentWindowが指しているものは、contentWindowに自分自身を追加する準備ができるまでに表示されていなかったため、問題を抱えていました。これを確認するには、ビューをクリックして、エディターの右下に文字カウントが表示されるのを待ちます。今キャンセルしても問題ありません。それを待たなければ、i.contentWindow is nullエラーが表示されます。修正するには、プラグインをスクラップします：

if (CKEDITOR.instances['textarea_name']) 
{
   CKEDITOR.instances['textarea_name'].destroy();
}
CKEDITOR.replace('textarea_name', { removePlugins: "wordcount" } );

単語カウンターが必要な場合は、単語をカウントする関数を使用して、エディターの貼り付けイベントとキーアップイベントに登録します。

jqueryの「アダプター」を使用していて、（私がそうであったように）問題が発生している人にとって、非常にハッキリでありながら機能する解決策は、次のようなことです。

// content editor plugin
(function($){
    $.fn.contentEditor = function( params ) {
        var xParams = $.extend({}, $.fn.contentEditor.defaultParams, params);
        return this.each( function() {   
            var $editor = $(this);
            var $params = $.extend({}, xParams, $editor.data());

            // if identifier is set, detect type based on identifier in $editor
            if( $params.identifier.type ) {
                $params.type = $editor.find($params.identifier.type).val();
            }

            $editor.data('type', $params.type);

            // edit functionality
            editButton = $('<button>Edit Content</button>').on('click',function(){
                // content container
                var $cc = $('#' + $editor.data('type'));

                // editor window
                var $ew = $('<form class="editorWindow" />');
                $ew.appendTo('body');

                // editor content
                $ec = $('<textarea name="editorContent" />').val($cc.html());
                $ec.appendTo($ew);
                $ec.ckeditor();


                //$ec.ckeditorGet().setMode('source');


                $ew.dialog({
                    "autoOpen": true,
                    "modal": true,
                    "draggable": false,
                    "resizable": false,
                    "width": 850,
                    "height": 'auto',
                    "title": "Content Editor",
                    "buttons": { 
                        'Save': function() {                            
                            $cc.html( $ec.val() );
                            $ec.ckeditorGet().destroy(); 
                            $ew.remove();
                        },
                        'Cancel / Close': function() { 

                            $ec.ckeditorGet().destroy();                        
                            $ew.remove();
                        }
                    },
                    'close': function() {
                        $ec.ckeditorGet().destroy(); 
                    },
                    'open': function() {
                        $ew.find('a.cke_button_source').click();

                        setTimeout(function(){
                            $ew.find('a.cke_button_source.cke_on').click();
                        }, 500);
                    }
                });

                return false;
            });

            editButton.appendTo( $editor );

        });
    }

    // set default option values
    $.fn.contentEditor.defaultParams = {
        'identifier': {
            'type': 'input[name="type"]'
        }
    };   

})(jQuery);   

$(function(){

    $('form.contentEditor').contentEditor();

});

この部分の重要なポイント：

                'open': function() {
                    $ew.find('a.cke_button_source').click();

                    setTimeout(function(){
                        $ew.find('a.cke_button_source.cke_on').click();
                    }, 500);
                }

これにより、次にダイアログを開いたときにエディターのテキストが表示されないという問題が修正されます。これは非常にハックであることに気づきましたが、これらのほとんどが管理ツールに使用されることを考えると、それは通常の場合ほど大きな問題ではないと思います。そして、これは機能します。時間;）

これは、jquery .load（）apiとckeditorの完全に機能するコードです。私の場合、ckeditorを含むページをいくつかのjquery効果を使用してdivにロードしています。お役に立てば幸いです。

 $(function() {
            runEffect = function(fileload,lessonid,act) {
            var selectedEffect = 'drop';
            var options = {};
            $( "#effect" ).effect( selectedEffect, options, 200, callback(fileload,lessonid,act) );
        };
        function callback(fileload,lessonid,act) {
            setTimeout(function() {//load the page in effect div
                $( "#effect" ).load(fileload,{lessonid:lessonid,act:act});
                 $("#effect").show( "drop", 
                          {direction: "right"}, 200 );
                $("#effect").ajaxComplete(function(event, XMLHttpRequest, ajaxOptions) {
                    loadCKeditor(); //call the function after loading page
                });
            }, 100 );   
        };

        function loadCKeditor()
        {//you need to destroy  the instance if already exist
            if (CKEDITOR.instances['introduction']) 
            {
                CKEDITOR.instances['introduction'].destroy();
            }
            CKEDITOR.replace('introduction').getSelection().getSelectedText();
        }
    });

===================== button for call the function ================================

<input type="button" name="button" id="button" onclick="runEffect('lesson.php','','add')" >

とてもシンプルです。私の場合、ページの読み込み中にckeditorインスタンスを破棄する以下のjqueryメソッドを実行しました。これはトリックを行い、問題を解決しました-

jQueryメソッド-

function resetCkEditorsOnLoad(){

    for(var i in CKEDITOR.instances) {
        editor = CKEDITOR.instances[i];
            editor.destroy();
            editor = null;
    }
}

$(function() {

            $(".form-button").button();
    $(".button").button();

    resetCkEditorsOnLoad(); // CALLING THE METHOD DURING THE PAGE LOAD

            .... blah.. blah.. blah.... // REST OF YOUR BUSINESS LOGIC GOES HERE

       });

それでおしまい。お役に立てば幸いです。

乾杯、シリアス。

この関数はCKEditorバージョン4.4.5で機能します。メモリリークはありません。

 function CKEditor_Render(CkEditor_id) {
        var instance = CKEDITOR.instances[CkEditor_id];
        if (CKEDITOR.instances.instance) {
            CKEDITOR.instances.instance.destroy();
        }
        CKEDITOR.replace(CkEditor_id);
    }

//この関数を以下のように呼び出します

var id = 'ckeditor'; // Id of your textarea

CKEditor_Render(id);

CKeditor 4.2.1

ここにはたくさんの答えがありますが、私にはもっと何かが必要でした（少し汚いので、誰かが改善できる場合はどうぞ）。私にとっては、MODALは私の問題です。

Foundationを使用して、CKEditorをモーダルでレンダリングしていました。理想的には、終了時にエディターを破壊することになっていましたが、Foundationを台無しにしたくありませんでした。

私は削除を呼び出し、削除と別の方法を試しましたが、これが最終的に解決しました。

私はtextareaを使用してDIVではなくデータを入力していました。

私の解決策

//hard code the DIV removal (due to duplication of CKeditors on page however they didn't work)

    $("#cke_myckeditorname").remove();


     if (CKEDITOR.instances['myckeditorname']) {
                delete CKEDITOR.instances['myckeditorname'];
                CKEDITOR.replace('myckeditorname', GetCKEditorSettings());
            } else {
                CKEDITOR.replace('myckeditorname', GetCKEditorSettings());
            }

これは私の特定のフォーマットを返すための私の方法でしたが、あなたは望まないかもしれません。

    function GetCKEditorSettings()
    {
       return {
                    linkShowAdvancedTab: false,
                    linkShowTargetTab: false,
                    removePlugins: 'elementspath,magicline',
                    extraAllowedContent: 'hr blockquote div',
                    fontSize_sizes: 'small/8px;normal/12px;large/16px;larger/24px;huge/36px;',
                    toolbar: [
                        ['FontSize'],
                        ['Bold', 'Italic', 'Underline', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink'],
                        ['Smiley']
                    ]
                };
    }

これを試して：

for (name in CKEDITOR.instances)
{
    CKEDITOR.instances[name].destroy(true);
}