Question

I have an instance of CKEditor on a content-editing page. I’m looking to re-use or reset a CKEditor instance.

Use case

I have a table of which each cell is editable. When the user clicks a cell, I present them the CKEditor which provides editing functionality.

I’m setting data using CKEDITOR.instances.cellContent.setData( cellContent );

I’m getting data with var cellContent = CKEDITOR.instances.cellContent.getData();

This works well, except the CKEditor still thinks it has the old content after I call a setData()

1. user clicks cell #1
2. user edits cell #1, uses the color ‘red’ on a word
3. user saves cell #1
4. user clicks cell #2
5. now CKEditor shows the color ‘red’ as being active/used. But in fact it isn’t because since that color has been used, other content has been loaded in the editor.

Does anyone know how to reset, reuse or (efficiently) re-instantiating a CKEditor instance?

(Google did not help me on this one)

Thanks for thinking along!

UPDATE 1

I’m using a single editor instance, which will be reused for editing of each table cell. (hidden when inactive, by setting display:none on containing element)

UPDATE 2

I’m using firefox 13.0.1 for Mac. Allthough this color problem does not occur on Chrome, the same issue does happen with the bold/italic buttons.

Answer 1

It’s not possible to re-instantiate editor on new element. One instance is bound to one editable for its entire life.

You haven’t mentioned how do you initialize editor. For each table cell, because you want to have editors in cells? Or you have one editor, outside the table and you just want to load content of clicked cell there and update it on blur/change/etc.

If you chose the first option, then you have to create editor instance for each table cell. You don’t have to do this on page load – it’d be better to do this on cell click. When user leaves the cell you don’t have to destroy (editor#destroy) editor – it’s better to hide it and reuse for the same cell later.

If you chose the second option, then setData/getData should be enough to refresh editor’s UI (buttons states). I checked now and this looks like a bug. Luckily it can be easily fixed by calling editor#focus after setting data – then UI is updated (at least in my quick test). If it won’t work, delay focusing, because I was testing this manually from the console, so it was delayed by default.