jQuery를 사용하여 CKEditor의 iframe에서 내용 가져오기

jQuery를 사용하여 CKEditor의 iframe에서 내용 가져오기

콘텐츠 편집을 위해 CKEditor *(FCKEditor v3)를 사용하는 사용자 지정 CMS가 있습니다.저는 또한 JQuery Validation 플러그인을 사용하여 AJAX 기반 제출 전에 모든 필드에 오류가 있는지 확인하고 있습니다.데이터를 PHP 백엔드로 전달하기 위해 serialize() 함수를 사용하고 있습니다.

문제는 직렬화가 CCEditor에 입력된 실제 내용을 제외한 모든 필드를 올바르게 가져올 수 있다는 것입니다.다른 모든 WYSIWYG 편집기와 마찬가지로 이 편집기도 iframe을 기존 텍스트 상자 위에 오버레이합니다.그리고 serialize는 iframe을 무시하고 텍스트 상자에서만 내용을 검색합니다. 물론 이 텍스트 상자는 찾지 못하므로 빈 내용 본문을 반환합니다.

이에 대한 저의 접근 방식은 CCEditor의 on change 이벤트에 대한 후크를 만들고 편집기에서 변경된 내용으로 텍스트 상자 CKEDITOR.instances.[textboxname].getData()또는 다른 숨겨진 필드를 동시에 업데이트하는 것입니다.

하지만 CKEditor는 아직 베타 단계이고 설명서가 많이 부족하기 때문에 그렇게 할 수 있는 적절한 API 호출을 찾을 수 없습니다.

이 일을 어떻게 해야 할지 아는 사람이 있습니까?

이에 대한 또 다른 일반적인 해결책은 양식을 제출할 때마다 다음을 실행하는 것입니다.

for ( instance in CKEDITOR.instances )
            CKEDITOR.instances[instance].updateElement();

양식의 모든 CKEDIOR 인스턴스가 해당 필드를 업데이트합니다.

저는 방금 jQuery용 CKEditor 플러그인을 출시했습니다. 이 플러그인은 별도의 코드 없이 백그라운드에서 이 모든 것을 처리합니다. http://www.fyneworks.com/jquery/CKEditor/

저도 오늘 이 문제를 해결하려고 노력하고 있습니다.위 코드가 제게 맞지 않는 이유는 문서 속성을 참조할 때 CKEditor 인스턴스가 아직 준비되지 않았기 때문이라는 것을 깨달았습니다.따라서 "instanceReady" 이벤트를 호출하고 그 안에서 문서의 이벤트를 사용할 수 있어야 합니다. 그 이전에는 존재하지 않기 때문입니다.

이 예는 다음과 같은 경우에 도움이 될 수 있습니다.

CKEDITOR.instances["editor1"].on("instanceReady", function()
{
//set keyup event
this.document.on("keyup", CK_jQ);

 //and paste event
this.document.on("paste", CK_jQ);
});

function CK_jQ()
{

    CKEDITOR.tools.setTimeout( function()
    { 
        $("#editor1").val(CKEDITOR.instances.editor1.getData()); 
    }, 0);
}

이 정도면...

CKEDITOR.instances["editor1"].document.on('keydown', function(event)
{
    CKEDITOR.tools.setTimeout( function()
    { 
        $("#editor1").val(CKEDITOR.instances.editor1.getData()); 
    }, 0);
});

CKEDITOR.instances["editor1"].document.on('paste', function(event)
{
    CKEDITOR.tools.setTimeout( function()
    { 
        $("#editor1").val(CKEDITOR.instances.editor1.getData()); 
    }, 0);
});

편집: 붙여넣기 후 텍스트 상자를 업데이트하는 섹션도 추가되었습니다.

저는 이것으로 성공했습니다.

console.log(CKEDITOR.instances.editor1.getData());

저는 약간 다른 접근 방식을 취했습니다. 저는 체크 에디터의 업데이트 기능을 사용하는 것이 더 나을 것이라고 생각했고 키업이 사용되고 있었기 때문에 타임아웃이 필요하지 않았습니다.

CKEDITOR.instances["editor1"].on("instanceReady", function()
{
//set keyup event
this.document.on("keyup", CK_jQ);

 //and paste event
this.document.on("paste", CK_jQ);
}

function CK_jQ()
{
   CKEDITOR.instances.editor1.updateElement(); 
}

이렇게 하는 것이 좋지 않을까요?

CKEDITOR.instances.editor1.on('contentDom', function() {
          CKEDITOR.instances.editor1.document.on('keyup', function(event) {/*your instructions*/});
        });

참조: http://cksource.com/forums/viewtopic.php?f=11&t=18286

ready 인스턴스가 아니라 contentDom 이벤트가 작동했습니다.무슨 일이 있었는지 정말 알고 싶습니다만, 소유권이 있다고 생각합니다.

var editor = CKEDITOR.replace('editor');

CKEDITOR.instances.editor.on("instanceReady", function(){
    this.on('contentDom', function() {
        this.document.on('keydown', function(event) {
            CKEDITOR.tools.setTimeout( function(){ 
                $(".seldiv").html(CKEDITOR.instances.editor.getData()); 
            }, 1);
        });
    });
    this.on('contentDom', function() {
        this.document.on('paste', function(event) {
            CKEDITOR.tools.setTimeout( function(){ 
                $(".seldiv").html(CKEDITOR.instances.editor.getData()); 
            }, 1);
        });
    });
    edits_clix();
    var td = setTimeout("ebuttons()", 1);
})

CKEDITOR.instances.wc_content1.getData() datackeditor합니다.
CKEDITOR.instances.wc_content1.setData() 데이터 ckeditor 를 합니다.

사용자가 직렬화에 대해 질문한 것 같습니다. 제출해야 할 양식을 직렬화하는 데 어려움을 겪었고 많은 문제를 일으켰습니다.

이것이 저에게 도움이 되었습니다.

$(document).ready(function() {
$('#form').submit(function(){
if ( CKEDITOR.instances.editor1.getData() == '' ){
    alert( 'There is no data available' );//an alert just to check if its working
}else{
    var editor_data = CKEDITOR.instances.editor1.getData();
    $("#editor1").val(editor_data); //at this point i give the value to the textarea
    $.ajax({ 
                    //do your ajax here  

                     });

        }
return false;
    });
 });

현재 버전인 http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js 에서 이 문제를 해결했습니다.

55행 뒤에 this.submit(function(이벤트)) { - i는 이 코드를 추가했습니다.

if (typeof CKEDITOR !== "undefined") {
    for ( instance in CKEDITOR.instances )
        CKEDITOR.instances[instance].updateElement();
}

언급URL : https://stackoverflow.com/questions/924145/using-jquery-to-grab-the-content-from-ckeditors-iframe