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