How to load data into ckeditor onload

Question

Is it possible to load data into the ckeditor without using JQuery? I would like to use an inline script tag for this if possible. All of the examples I can find deal with Jquery and that isn't optimal in my case.

What I have so far is the example I found on CKs site:

CKEDITOR.instances.editor1.setData( '<p>Some other editor data.</p>', function()
    {
        this.checkDirty();  // true
    });

I've tried to use this with an inline script tag but it crashes the editor. If I use this in JQuery, it will work as expected.

Answer 1

Here is an example using CKEDITOR API without using jQuery. Please observe the call to replace function which initializes the "editor1" instance of the CKEDITOR with the textarea content. I think that would be the easiest way to populate the content onload, but if that will not suffice, you can see I've used the code in your question to populate the CKEDITOR with "Some other editor data."

HTML:

<textarea id="editor1">
    Hello, world!
</textarea>​

Javascript:

CKEDITOR.replace( 'editor1', {
    toolbar: 'Basic',
    uiColor: '#9AB8F3'
});
CKEDITOR.instances.editor1.setData( '<p>Some other editor data.</p>', function()
{
    this.checkDirty();  // true
});

​

http://jsfiddle.net/cDzqp/

Answer 2

I know this question is old but I've just figured out my solution and I think is cleaner so I'm adding my two cents here for whoever might have the same problem in the future.

CKEditor automatically sets the content of the new textarea using what is originally within the old, replaced one. In other words, it's sufficient to change the content of the textarea and only then call the replace command. This would be the code:

document.getElementById("editor1").value = "<p>Some other editor data.</p>";
CKEDITOR.replace("editor1");

Done :)

Answer 3

If someone is looking for solution to append content to existing content in CKEditor this will help. - I am using CKEditor 4.15.0

CKEDITOR.replace( 'editor1', {
toolbar: 'Basic',
uiColor: '#9AB8F3'});

CKEDITOR.instances.editor1.setData( CKEDITOR.instances.editor1.getData + 'New Content Here', function()
{
    this.checkDirty();  // true
});

modified as per my requirement, based on answer by Patrick Jones

Thanks