CKEditor sourcedialog get html data

Question

나는 ckeditor의 소스 코드에서 HTML 데이터를 얻으려고 애 쓰고 있습니다.

편집기 자체에서 HTML 데이터를 얻을 수 있지만 문제는 없습니다. 그러나 대화에서 그것을 얻는 것은 엉덩이에 고통입니다.

원본 대화 상자에 입력 한 HTML의 실시간 미리보기를 표시하고 싶습니다. 편집자가 아닌 편집중인 대화 상자에서 HTML 데이터가 필요합니다.

CKEDITOR.on('dialogDefinition', function(ev) { 
 
    var editor = ev.editor; 
 
    var dialog = ev.data.definition.dialog; 
 
    var dialogName = ev.data.name; 
 
    var dialogDefinition = ev.data.definition; 
 
    var editorName = ev.editor.name; 
 
    var htmlData = CKEDITOR.instances[editorName].getData(); 
 

 
    if (dialogName == 'sourcedialog') { 
 
    dialog.on('show', function() { 
 
     //console.log(this.getSize().width); 
 
     console.log(this); 
 
     $("#sourcePreview").css("display", "block"); 
 
     $("#sourcePreview").html(htmlData); 
 

 
     $(".cke_dialog_ui_input_textarea textarea").on("keyup", function() { 
 
     //var dialogElementUpdated = dialogObj.getElement().getFirst(); 
 
     //console.log(editorData); 
 
     //$("#sourcePreview").html(htmlDataUpdated); 
 
     }); 
 
    }); 
 
    dialog.on('hide', function() { 
 
     console.log('dialog ' + dialogName + ' closed.'); 
 
     $("#sourcePreview").css("display", "none"); 
 
    }); 
 
    } 
 
});

이것은 내가 지금까지 무엇을 가지고 (미안 모든 console.logs에 대한이 진행중인 작품입니다). 나는 분명히 varible : htmlData에서 HTML 데이터를 얻고있다. 그러나 이것은 대화 상자가 아닌 편집기에서 가져온 것이다.

Answer 1

CKEditor는 훌륭하지만 예, 엉덩이에 통증이 있습니다.

if (dialogName == 'sourcedialog') 
{ 
    dialog.on('show', function() 
    { 
    // 'input' is the correct event to listen to for a textarea, 
    // it fires on paste too. 
    this.getContentElement('main', 'data').getInputElement().on('input', function() 
    { 
     console.log('textarea contents: ' + this.$.value); 
    } 
    } 
}