[javascript] CKEditor 인스턴스가 이미 있습니다.

Program / 글쓴이

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

i.contentWindow 오류가 발생 했습니다.ajax의 새 데이터로 새 인스턴스를 만들 때마다 오류 . 그러나 이것은 내가 DOM을 지운 후에 인스턴스를 파괴하고 있다는 것을 알 때까지만 이루어졌습니다.

인스턴스와 DOM이 페이지에있는 동안 destroy () 를 사용하면 완벽하게 작동합니다.

답변

ajax 요청의 경우 

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

이것은 문서에서 모든 인스턴스를 제거합니다. 그런 다음 새 인스턴스를 만듭니다.