CKEditor TextArea Refresh And Destroy

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'}
});

First you can't append to a textarea, you have to set it's value using val(). You can do everything you describe through the ckEditor API including updating the editor html and View Source for your toggle of textarea/WYSIWYG — charlietfl
val didn't work either. You can append to a textarea, at least in firefox, because I've done it before. Also, I don't want to toggle the view source option, I literally want it to become a standard text area again. — TroySteven
toggling View Source shows textarea, and I strongly disagree about append as a cross browser practice.. it doesn't work — charlietfl
Anyways..., I'll use val instead of append. It still isn't showing in the editor though. The textarea is updated by jquery as I can see if firebug, but the editor doesn't show the change. I need something that will refresh the editor. — TroySteven
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. — TroySteven

TroySteven TroySteven · Accepted Answer · 2013-01-24T16:58:16

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.

CKEditor TextArea Refresh And Destroy

1 Answers