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


99

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 ()"에서 발생하는 것 같습니다. 누구든지 이것을 경험하고 다른 해결책을 찾았습니까?

기존 편집기를 파괴하고 교체하는 대신 '다시 렌더링'할 수 있습니까?

업데이트 됨 동일한 문제를 다루는 또 다른 질문이 있지만 그는 다운로드 가능한 테스트 케이스를 제공했습니다 .

답변:


101

이 작업을 수행하려면 인스턴스를 삭제할 때 부울 매개 변수 true 를 전달해야 합니다.

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

2
"true"옵션은 모든 차이를 만듭니다. 또한 아래에 제공된 "CKEDITOR.remove (instance)"답변은 오류를 생성 할 수있는 내부 API이므로 좋은 솔루션이 아니라는 점을 언급 할 가치가 있습니다. instance.destroy (true)를 사용하는 것이 항상 더 좋습니다.
Bala Clark

고마워요, 이건 정말 저를 도와줍니다.
미완성

6
감사의 합창단에 합류! 저는 Stack Overflow가 항상 한 번의 검색으로 모든 문제를 해결하는 방법을 좋아합니다.
Tommi Forsström

1
이 답변은 매우 유용합니다. 여기 깊숙이 묻혀 있다는 것이 놀랍습니다.
Petr Vostrel 2013 년

2
그들이받은 투표 수를 기준으로 답변을 정렬 할 수있는 옵션이 있어야합니다. 그래야 가장 좋은 답변이 맨 위에 오게됩니다.
shasi kanth

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

이로 인해 약간의 슬픔이 생겼지 만 귀하의 솔루션이 도움이되었습니다. 감사!
Ben Scheirman

페이지에 CKEditor의 세 인스턴스가있는 파이어 폭스에서도 비슷한 문제가 발생했습니다. 첫 번째는 표시되지 않았지만 다른 두 개는 위의 코드를 추가하고 모든 편집기가 나타납니다.
Craig Angus

18
CKEDITOR.remove는 배열에서 요소를 지우고 모든 DOM을 메모리에 남겨두기 때문에 사용하지 마십시오. 내부 사용을위한 것으로 문서에 명시되어 있습니다. docs.cksource.com/ckeditor_api/symbols/CKEDITOR.html#.remove madhaviaddanki가 말한대로 대신 instace.destroy ()를 사용해야합니다.
AlfonsoML

2
동일한 상황에서 실행되었으며 언급했듯이이 대답은 올바르지 않습니다. destroy ()를 사용하고 실제 매개 변수를 전달하는 것이 아래에 언급 된 것처럼 마침내 저에게 효과적이었습니다.
Mathachew

19

나도이 문제가 있었지만 훨씬 더 간단한 방법으로 해결했습니다 ...

나는 내 jQuery 스크립트에서 "ckeditor"클래스를 CKEditor에 사용하고자하는 텍스트 영역의 선택기로 사용하고 있었다. 기본 ckeditor JS 스크립트도이 클래스를 사용하여 CKEditor에 사용할 텍스트 영역을 식별합니다.

이것은 내 jQuery 스크립트와 기본 ckeditor 스크립트 사이에 충돌이 있음을 의미합니다.

단순히 textarea의 클래스와 jQuery 스크립트를 'do_ckeditor'( "ckeditor"를 제외한 모든 것을 사용할 수 있음)로 변경하고 작동했습니다.


고마워요, 예, "자동"ckeditorizing도 저를 망쳤습니다. 참조 stackoverflow.com/a/3631391/923817
D.Tate dec

11

이것은 나를 위해 일한 가장 간단한 (유일한) 솔루션입니다.

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

배열에서이 항목을 삭제하면이 양식 안전 검사로 인해 애플리케이션이 손상되지 않습니다.

destroy () 및 remove ()는 나를 위해 작동하지 않았습니다.


1
이것은 저와 함께 일한 유일한 솔루션입니다. 게시 해 주셔서 감사합니다!
Michael Robinson

나는 작동하기 위해 destroy ()를 얻었습니다. 그러나 둘 다 delete또는destroy() 편집기 인스턴스를 정리 완전히 정리 . 사전 및 기타 관련 개체와 같은 것은 여전히 ​​숨어 있습니다.
adu 2010-08-12

instance.destroy (true) 시도했지만 작동하지 않았습니다. 그러나 이것은 나를 위해 일했습니다. 누구든지 말해 줄 수 있습니까? 이것의 부작용이 있습니까?
Alex

7

아마도 이것은 당신을 도울 것입니다-알 수없는 수의 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 ()는 내부 용이며 한 지점에서 부적절하게 문서화되었습니다.


이것은 오류를 제거한 것처럼 보이지만 두 번째 렌더링에서 텍스트 영역에는 이제 'null'이 포함되어 더 이상 도구 모음이나 텍스트 영역과 상호 작용할 수 없습니다. 툴바 버튼을 클릭하면 "TypeError : Result of expression 'this. $. focus'[undefined] is not a function"-또는- "TypeError : Result of expression 'this.document.getWindow () . $ '[undefined]는 개체가 아닙니다. " 그 함수는 어디서 / 언제 호출합니까? jquery로드 된 콘텐츠와 인라인으로 스크립트가 있습니다. (부모 html의 머리 부분에있는
ckeditor.js

모든 텍스트 영역이 페이지에 추가되고 내용으로 채워진 후에 이것을 호출합니다.
ScottE

5

ajax를 통해로드 된 콘텐츠에 대해 CKeditor의 여러 인스턴스를 만드는 유사한 문제가 있습니다.

CKEDITOR.remove ()

DOM을 메모리에 보관하고 모든 바인딩을 제거하지 않았습니다.

CKEDITOR.instance [instance_id] .destroy ()

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

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


5

ajax 요청의 경우

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

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



3

i.contentWindow is null오류는 더 이상 DOM에없는 텍스트 영역에 연결된 편집기 인스턴스에서 destroy를 호출 할 때 발생하는 것 같습니다.

CKEDITORY.destroy 매개 변수를 취하다 noUpdate .

APIdoc은 다음과 같이 설명합니다.

인스턴스가 DOM 요소를 대체하는 경우이 매개 변수는 요소를 인스턴스 콘텐츠로 업데이트할지 여부를 나타냅니다.

따라서 오류를 방지하려면 DOM에서 textarea 요소를 제거하기 전에 destroy를 호출하거나 존재하지 않는 DOM 요소를 업데이트하지 않으려면 destory (true)를 호출하십시오.

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

(jQuery 어댑터와 함께 버전 3.6.2 사용)


3

이것은 나를 위해 일한 것입니다.

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

"취소"코드가 이와 비슷한 것을 호출하는지 확인하십시오! 내 문제는 내 취소가 destroy라고 부르지
않았다는 것입니다.

2
CKEDITOR.instances = new Array();

인스턴스를 생성하기 위해 호출하기 전에 이것을 사용하고 있습니다 (페이지로드 당 하나씩). 이것이 메모리 처리에 어떤 영향을 미치는지 잘 모르겠습니다. 이것은 페이지의 모든 인스턴스를 바꾸려는 경우에만 작동합니다.


1
나는이 페이지의 모든 솔루션을 시도했습니다 ... 내 환경을 위해 이것은 작동 한 유일한 솔루션입니다 (그러나 내 ie9에서만 FF에서 제대로 작동하지 않았습니다) ... 다른 사람들이 왜 그렇지 않은지 잘 모르겠지만 1 시간 후에 시행 착오의 경우 이것은 나를 위해 일한 유일한 솔루션입니다. 이 앤드류를 게시 해 주셔서 감사합니다.
Ronedog 2012-08-03

2

위의 모든 코드를 기반으로 자체 솔루션을 준비했습니다.

      $("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 구조가 있습니다. instace의 경우 :

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

이로 인해 문제가 발생하고 ckEditor가 작동하지 않습니다. 따라서 올바른 DOM 구조가 있는지 확인하십시오.


2

나는 인스턴스와 동일한 문제가 있었고 모든 곳을 찾고 있었고 마침내이 구현이 나를 위해 작동합니다.



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

2

ckeditor의 remove 메소드로 ckeditor 인스턴스를 제거 할 수 있습니다. 인스턴스는 텍스트 영역의 ID 또는 이름입니다.

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

1

실제로 코드에서 ".ckeditor"클래스를 제거하면 문제가 해결됩니다. 우리 대부분은 ckeditor의 문서에서 jQuery 통합 예제를 따랐습니다.

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

그리고 "... 어쩌면 내가 그냥 제거하거나 '.jquery_'부분을 제거 할 수 있을지도 몰라"라고 생각했습니다.

(실제로 {skin : 'office2003'}이 작동했기 때문에) 콜백 함수를 조정하는 데 시간을 낭비했지만 문제는 다른 곳에서 발생했습니다.

나는 문서에서 "ckeditor"를 클래스 이름으로 사용하는 것은 예약 된 키워드이기 때문에 권장되지 않는다고 언급해야한다고 생각합니다.

건배.


1

나는 그것을 배웠다

CKEDITOR.instances [editorName] 삭제;

실제로 인스턴스를 제거했습니다. 사용자의 stackoverflow에서 여기에서 찾은 것을 포함하여 내가 읽고 본 다른 모든 방법은 나를 위해 작동하지 않았습니다.

내 상황에서는 ajax 호출을 사용하여 및 's를 감싸는 내용의 사본을 가져옵니다. 문제는 jQuery .live 이벤트를 사용하여 "이 문서 편집"링크를 바인딩 한 다음 ajax로드 성공 후 ckeditor 인스턴스를 적용하기 때문에 발생합니다. 즉, 다른 .live 이벤트가있는 링크의 다른 링크를 클릭 할 때 콘텐츠 창을 지우고 (양식 유지) 콘텐츠를 다시 가져 오는 작업의 일부로 delete CKEDITOR.instances [editorName]을 사용해야합니다. 데이터베이스 또는 기타 리소스에서.


1

jQuery 대화 상자와 동일한 문제가 발생했습니다.

이전 데이터 만 제거하려는 경우 인스턴스를 삭제하는 이유는 무엇입니까?

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

1

나는 파괴 / 바꾸기 대신 모든 인스턴스의 이름을 변경하기로 결정했습니다. 때때로 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];
        }
    }

1

나는 대화를 생성하는 것을 제어해야하는 상황에 처해 있으며, 그들 각각은 이러한 대화창에 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)
    {

    }
});


0

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
...

이제 텍스트가 모달 대화 상자에서 일관되게 렌더링됩니다.


0

동일한 (동일한 양식이 다시 호출 됨) 또는 다른 ID (이전에 언로드 된 양식)를 가진 텍스트 영역을 포함하는 양식 (페이지 새로 고침없이)의 동적 (Ajax)로드를 지원하고이를 CKEditor 요소로 변환하기 위해 다음을 수행했습니다 (JQuery 사용 어댑터):

페이지가 변환 할 텍스트 영역을 전달하는 모든 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 콘텐츠가 원래 텍스트 영역 콘텐츠와 동일하도록 강제합니다. 사용하면 깜박 거림이 발생합니다. 사용을 피할 수 있다면 그렇게하세요 ..


0

나는 jackboberg와 똑같은 문제가 있었다. jquery 대화 상자에 동적 양식로드를 사용한 다음 다양한 위젯 (datepickers, ckeditors 등)을 첨부했습니다. 그리고 위에서 언급 한 모든 솔루션을 시도했지만 어느 것도 나를 위해 일하지 않았습니다.

어떤 이유로 ckeditor는 양식을 처음로드 할 때만 첨부했고 두 번째에는 jackboberg가했던 것과 똑같은 오류 메시지를 받았습니다.

내 코드를 분석 한 결과 양식 내용이 아직 대화 상자에 배치되지 않는 동안 "공중"에서 ckeditor를 첨부하면 ckeditor가 바인딩을 제대로 첨부하지 않는다는 것을 발견했습니다. ckeditor가 "공중"에 첨부 되었기 때문에 두 번째로 "공중"에 첨부하면 ... 휙 ... 첫 번째 인스턴스가 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

0

나는 똑같은 일을 만났고 문제는 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" } );

단어 카운터가 필요한 경우 단어를 세는 기능을 사용하여 편집기에서 붙여 넣기 및 키업 이벤트에 등록하십시오.


0

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

그러면 다음에 대화 상자를 열 때 편집기 텍스트가 표시되지 않는 문제가 해결됩니다. 나는 이것이 매우 끔찍하다는 것을 알고 있지만 이것들 대부분이 관리 도구에 사용될 것이라는 점을 고려할 때 평상시만큼 큰 문제라고 생각하지 않습니다 .. 이것은 작동하므로 누군가를 구할 수 있기를 바랍니다. 시각 ;)


0

이것은 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')" >

0

꽤 간단합니다. 제 경우에는 페이지로드 중에 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

       });

그게 다야. 도움이 되었기를 바랍니다.

건배, Sirish.


0

이 기능은 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);

0

CKeditor 4.2.1

여기에 많은 답변이 있지만 나에게는 더 많은 것이 필요했습니다 (누군가 개선 할 수 있다면 조금 더럽 기 때문에하십시오). 나를 위해 모달 내 문제.

Foundation을 사용하여 모달에서 CKEditor를 렌더링했습니다. 이상적으로는 내가 닫을 때 편집자를 파괴했을 것이지만 재단을 망치고 싶지 않았습니다.

나는 삭제라고 불렀고, 나는 제거와 다른 방법을 시도했지만 이것이 마침내 내가 해결 한 것입니다.

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

0

이 시도:

for (name in CKEDITOR.instances)
{
    CKEDITOR.instances[name].destroy(true);
}
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.