How to cause CKEditor textarea to refresh / update with client side changes?

Question

SCRIPT

$('.DDL').change(function update() {
    $.get('../Folder' + $(this).val() + '.html', function(result) {  
        $('.CKE').val(result);
    });
});

TEXTAREA

<asp:CKEditorControl ID="txtMailBody" CssClass="CKE" RunAt="Server" BasePath="~/Editor"/>

I have some jscript that populates my textareas with relevant content based on their selection.

The javascript works perfectly to populate any textarea.

It does not work when my textarea is my ckeditor.

Inspecting the page reveals that the content is being added but the ckeditor does not display it. Refreshing the page also causes the content to appear.

QUESTION

How can I cause a CKEditor textarea to refresh / update to show client side code that has been added on the fly from a dropdownlist?

Answer 1

Use

CKEDITOR.instances['txtMailBody'].setData(result);

instead of

$('.CKE').val(result);

..When you update the CKEditored' textarea.

---

Try this little demo :

select box with text snippets to be inserted :

<select id="test">
<option>some text to be inserted</option>
<option>some other text</option>
<option>even more text</option>
</select>

A textarea that becomes a CKEditor instance

<textarea id="txtMailBody"></textarea>

script

//create the CKEditor instance
CKEDITOR.replace("txtMailBody"); 

$("#test").change(function() {
    var result = $("#test option:selected").text();
    //HERE
    CKEDITOR.instances['txtMailBody'].setData(result);
    //instead of $(textarea).val(result);
});

It is of course only when the target is a CKEditor you should use CKEDITOR.instances['txtMailBody'].setData(result);, otherwise - if it is a textarea, use the code you already have.