CKeditor is a good WYSIWYG content editor and is very popular in various CMS and on-page editing tools. It _tends_ to work and is helpful to those who cannot use HTML natively.

However, from a developer standpoint – it can cause some headaches and it lacks proper API (or otherwise documentation). All you get is a brief reference and you can explore the prototypes and guess.

The problems start when you have a form that you handle through AJAX (XHR) that contains CKEDITOR instances for textareas. Intermittently, the submitted data would fail to update the database without any apparent reason.

After some digging, I came to write a fix (through MooTools 1.3) that is incorporated at the form handler prior to the AJAX call. The idea is simple: find any CKEDITOR instances, retrieve them, get the formatted HTML data out and set it as the value of the original textarea element so that the form will save correctly.

document.id("myform").addEvent("submit", function(e) {
    e.stop();
    // find instances, loop through them
    Object.each(CKEDITOR.instances, function(instance, key) {
        // find a form element that has the same id or name attribute
        var el = document.id(key) || document.getElement("name=[" + key + "]");
        if (el) {
            // set matching original element's value to data
            el.set("value", instance.getData());
        }
    });

    // continue with form processing now.
});

I hope it helps somebody as it has been a nuisance for me for a while.