I am having two related issues with CKEditor. First:
When a user focusses on an empty editor and exits an empty p tag is inserted to the dom. Normally this wouldn't matter, but the application needs to know when a user has entered text into a field. This behaviour fools the application into believing there has been text entered when there has not been. This is especially problematic for users who use the tab key to navigate fields.
My first solution was to listen to the blur event and clean up the empty p tags from the dom element. This worked, except when the user submits the form while the editor is in focus. The blur event is not fired, thus this empty p is sent merrily along to the server.
My second attempted solution was to listen to the getData event, clean up the html on the dataValue property. Reading the ckeditor source code lead me to believe that this would enable me to patch that html before it's inserted to the container dom element. It turns out this event is not fired when the editor content is changed, when focus is lost, or even when the form is submitted. It actually didn't seem to fire at all, ever. Here's how I was listening:
editor.on('getData', function (ev) {
ev.dataValue = cleanHtmlContent(ev.dataValue);
});
editor.on('setData', function (ev) {
ev.dataValue = cleanHtmlContent(ev.dataValue);
});
Then I tried modifying the config:
autoParagraph: false,
fillEmptyBlocks: false,
ignoreEmptyParagraph: true
Still hasn't helped.
My second related issue is when the user deletes all the content from the editor. A p tag containing an remains, which, again, fools the application into believing there is content in the field.
Are there any ideas about how I can avoid this problem (aside from cleaning the data up on the server side)?
Just bumpting this up
Would like to see a response.
My second related issue is
I'm almost certain this doesn't happen in the latest version of CKEditor. If I delete all the content on the demo page, there's no leftover element.
As for your main problem, it sounds like maybe you'd be better off listening to the change event.
It's probably not exactly your use case, but in my setup I check the editor once a second to see if the content has been changed, to determine whether I need to update a live mobile preview. Here's how I'm doing it:
var timer = null; function updatePreview(e) { $('#editor1_preview').contents().find('.entry-content').html(e.editor.getData()); } CKEDITOR.replace( 'editor1', { on: { instanceReady: function(e) { updatePreview(e); }, change: function (ev) { if (timer) { window.clearTimeout(timer); } timer = window.setTimeout( function() { timer = null; updatePreview(ev); }, 1000 ); } } } );