How to update div with a CKEDITOR?

Question

I have a page on which I have a div that I need to be able to update with several different pieces of code. I'm using an onClick event in a different div, which calls a js function to load in the appropriate code.

When I first bring up the page, the div has only one line:

<textarea name="editor1" rows="35">&lt;p&gt;Edit Area.&lt;/p&gt;</textarea>

And I use this function to get the editor on screen:

function showEditor() {
    CKEDITOR.replace( 'editor1', {height:'450'} );
}

(No, I didn't need to use a function. This was one of my attempts to fix the issue.)

It works great, as long as it gets used first.

The problem occurs after I load another set of code into the div. At that point, if I try to load in the editor again, I get an error that "editor1" is not defined. The error occurs whether or not "editor1" is actually part of the new code loaded into the div.

It seems to me the Javascript doesn't know about the new "editor1" item after a new load, and therefore can't do the replace.

I need to be able to indiscriminately load which ever routine I need into the div at any time. What do I need to do to accomplish this?

Thanks,

Sean.

Answer 1

Try this

var myEditorInstance = null;
function showEditor() {
    if (myEditorInstance)
        {
          myEditorInstance.destroy();
         // and if you have issues with the above you can try this ;)
         //CKEDITOR.remove(myEditorInstance);
        }

    myEditorInstance = CKEDITOR.replace( 'editor1', {height:'450'} );
}