ckeditor and display users data as they type

Question

I have a textarea that as the user enters data into the textarea, the data is displayed at the bottom of the form as a display of how their data may appear (much in the same way that StackOverflow gives a preview display of the users question as the user types it).

I have installed CKEditor 4.3.1 to this textarea and the preview display no longer appears.

I assumed that this was because the id of the text area had been replaced by the id of the CKEditor, so I tried replacing the id of the text area with the id of the CKEditor, but this approach did not work.

Is my thinkg wrong? I have read the CKEditor docs, but found nothing to help me.

What approach should I use to display the data as the user enters their data into the CKEditor?

oleq oleq · Accepted Answer · 2013-12-16T12:25:08

This is because CKEditor runs next to your <textarea> in DOM (hides it first) and, in a matter of fact, it doesn't update contents of your <textarea> unless you request it or destroy the editor. That's how CKEditor works.

Call editor.updateElement to synchronize <textarea> with rich editor contents. You can use editor#change event to updateElement periodically and keep things in sync.

What might be the problem is that, quite likely, your existing code observes keyboard events (onkeyup, onkeydown) fired in <textarea> and updates the preview at the bottom of your page. You need to re-attach those callbacks to editor#change event because CKEditor doesn't trigger any events in <textarea> (as I mentioned, it doesn't interact with it at all). So there are two ways of solving your problem:

On editor#change call editor.updateElement and fire keyboard event from code on <textarea> (see the fiddle).

CKEDITOR.replace( 'editor', {
    plugins: 'wysiwygarea,sourcearea,basicstyles,toolbar,undo',
    on: {
        instanceReady: function() {
            // Show textarea for dev purposes.
            this.element.show();
        },
        change: function() {
            // Sync textarea.
            this.updateElement();    

            // Fire keyup on <textarea> here?
        }
    }
} );

Attach existing preview update callbacks to editor#change.

I'm for 2. since 1. is a kind of hack. But it's up to you, of course.

ckeditor and display users data as they type

1 Answers