CKEditor sourcedialog獲取html數據

Question

我很努力地從ckeditor中的sourcedialog獲取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，這是工作正在進行中）。我顯然從變量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); 
    } 
    } 
}