Retrieving CKEditor Textarea Content with JavaScript

A NixMash Blog update has been pushed to GitHub with the fix for Post Content not being saved properly in post backups. The fix is described in this post.

If you're like me you compose your post in a nice Linux WYSIWYG Desktop Editor, copy the source to your CKEditor, save it, read it in another browser tab, save it, re-read the updated version, then after about 10 save and review cycles you finally publish it. That process requires that the Post is updated when saved for review in another browser tab refresh.

Here's the [SAVE] button on the NixMash Blog CKEditor Post Form. It uses JavaScript to push the Post Form to the MVC endpoint where it is saved but not published. That occurs on [UPDATE].

When the post wasn't being updated I assumed it was a caching issue on the server side, so that wasted some time until I realized the only field not being updated was the Post Content, or more specifically, the CKEditor textarea content.

Here's the original JavaScript used to build the JSON data object where we were retrieving the Post Content with a simple JQuery $('#editor').val().

Like most sophisticated Web Editors, CKEditor does some fancy handling of the Editor Content. What we were sending to the server was the original #editor.textarea value, not the up-to-the-minute CKEditor textarea value. Here's the correct JavaScript.

We use CKEDITOR.instances.editor.getData(); where "editor" is the editor in the JavaScript where you originally configure CKEditor.

Source Code Notes for this Post

Source code discussed in this post can be found in my NixMash Blog project located on GitHub.