CKEditor smooth setData

Question

I am currently using CKEditor to be able to edit and to view documents in my SQL database. If I change the content of the document in the sql database it should automatically update the CKEditor instance with the new text. My only problem is that it flashes when ever it updates (ie: it goes blank and then updates to the new text). Does anyone know of a way to make it a smother transition. I'm also using JQuery so I'm not sure if there is anything that could be used there to make a smooth transition to the new text.

CKEDITOR.instances.content.setData("data");
CKEDITOR.instance.content.setData("new data");

The change from data to new data will have a quick bit of lag.

Answer 1

There's no way to avoid some slight flickering when setting data in framed (based on wysiwygarea plugin) editor instance. This is because the entire contents of the iframe containing your work must be re-created. This is nothing like a piece of cake and I hardly think we can bypass this thing.

I'd recommend you to play with element.setHtml( html ) on editable though:

CKEDITOR.instances.editor1.editable().setHtml( '<p>FooBar</p>' );

This is not a valid method for setting editor contents in any way because it bypasses internal filtering, processing and stuff. Yet it may work formay you if you're careful.

P.S. You'll probably also want to cache editor1.editable() object to speed-up things.

---

There are quite some core developers of CKEditor active on stack overflow.

Yep. We are ;)

Answer 2

It seems that the screen flickers because the page is reloading an iframe within the editor. By using the divarea plugin for CKEditor I can get rid of the flickering. The only problem now is that the CKEditor.readOnly property no longer works...