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

Answer 1

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:

1. 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?
           }
       }
   } );
   

2. 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.