Javascript can't change text in textarea once CKeditor instance as been called on it

Question

Well i first wrote a Javascrip function that would change the text in a textarea according to the selection you made in a dropdown box, a really simple thing.

HTML

<form name="formconteudo">
<select name="selectpage" onChange="change();">
<option value="1">something</option>
<option value="2">another thing</option>
<option value="3">going crazy</option>
</select>
</form>

JS

var Code = new Array("", "Selected 1", "Selected 2", "Selected 3");
function change()
{
var ID =  formconteudo.selectpage.options[formconteudo.selectpage.selectedIndex].value;
document.formconteudo.ckeditor.value = Code[ID];
}

This worked pretty good and changed the text in the textarea. But then i called a CKeditor Instance on that textarea, so that i can use the CKEditor on that textarea. The Editor loads well and works great. But now the javascript isn't working.

Any hint on the problem?

Thanks

Answer 1

You are going to want to use the setData method on the editor.

Here is the example from their docs.

CKEDITOR.instances.editor1.setData( '<p>This is the editor data.</p>' );

Which means your code will look something like this:

var Code = new Array("", "Selected 1", "Selected 2", "Selected 3");
function change()
{
var ID =  formconteudo.selectpage.options[formconteudo.selectpage.selectedIndex].value;
CKEDITOR.instances.editor1.setData( '<p>' + Code[ID] + '</p>' );
}

Note instances.editor1 may not refer to your box, so be sure to use the right name

Answer 2

I've spent days on this issue, every one kept giving me odd solutions. Checked their API, and it even gives an example.

http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#setData

    CKEDITOR.instances.YOUREDITORID.updateElement();
    alert( document.getElementById( 'YOUREDITORID' ).value );  // The current editor data.

Where 'YOUREDITORID' is the ID of the textarea for CKeditor to be used.

Hope this helps!