如何将数据加载到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

Answer 4

Transforms input data into HTML to be loaded into the editor. While the editor is able to handle non-HTML data (like BBCode), it can only handle HTML data at runtime. The role of the data processor is to transform the input data into HTML through this function.

See source

// Tranforming BBCode data, with a custom BBCode data processor available.
var data = 'This is [b]an example[/b].';
var html = editor.dataProcessor.toHtml( data ); // '<p>This is <b>an example</b>.</p>'