CKEditor sourcedialog get html data - html

Question

I am struggling to get the HTML data from the sourcedialog in ckeditor.
I can get the HTML data from the editor itself, no problem. But getting it from the dialog is a pain in the ass.
I want to display a live preview of the HTML entered in the source dialog, and for that I need the HTML data, not from the editor, but from the dialog which the user is editing.
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");
});
}
});
This is what I have so far (sorry about all the console.logs, this is work in progress). I am obviously getting HTML data from the varible: htmlData, but this is from the editor, not the dialog.

Answer 1

CKEditor is great but yeah, there's a lot about it that's a pain in the ass.
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);
}
}
}