Question

I’m running into an issue where I have a button on my page that has a CKEditor.
When the button is pressed I want to append text to the editor.

I used the following code:

$('#mtxDescription').append($(this).data('key'));
CKEDITOR.instances['mtxDescription'].updateElement();

However this does not work. The editor does not reflect the change. However when I inspect the editor I find that the textarea does show the appropriate text appended, its just the editor is not showing it. Does anyone know of a way to get around this. Also, just in case anyone is wondering, I do have the jquery CKEditor adaptor script referenced in my page.

Also, if a somewhat related, but separate issue.

I have a drop down list that will allow the user to toggle between the text area shown on the page being the CKEDitor WIZIWIG and going back to being a normal textarea again. However I can’t seem to do this without literally refreshing the page, I want to do it through javascript/jquery so I don’t have to refresh the page whenever the change the dropdown selection. I’ve already tried the built in destroy method. It doesn’t seem to do anything visually, the editor does not revert back to a simple textarea.

Just in case you were going to ask for some more code, here is what my HTML page looks like:

<textarea id="mtxDescription" name="mtxDescription"></textarea>

Here is how I initialize the editor

CKEDITOR.replace('mtxDescription', {
    sharedSpaces: { top: 'ed-top'}
});

Answer 1

I was able to solve this problem by using the following code instead of using jQuery CKEDITOR.instances.mtxDescription.insertHtml($(this).data(‘key’)) I still need a way to remove the editor at runtime.