How do I set a value in CKEditor with Javascript?

问题

I am wondering how I can set a value in CKEditor using Javascript?

I have tried the following, but neither of them work...

document.[form name].[textarea name].value=data;
$(\'#textareaID\').val(data);

However, both these work without the editor applied. Is there a way I can do this with the editor?

回答1:

Use the CKEditor method setData():

CKEDITOR.instances[**fieldname**].setData(**your data**)

回答2:

The insertHtml() and insertText() methods will insert data into the editor window, adding to whatever is there already.

However, to replace the entire editor content, use setData().

回答3:

Use insertHtml() or insertText() method.

回答4:

I have used the below code and it is working fine as describing->

CKEDITOR.instances.mail_msg.insertText(obj["template"]);

Here-> CKEDITOR ->Your editor Name, mail_msg -> Id of your textarea(to which u bind the ckeditor), obj["template"]->is the value that u want to bind

回答5:

Try This

CKEDITOR.instances['textareaId'].setData(value);

回答6:

<textarea id="editor1" name="editor1">This is sample text</textarea>

<div id="trackingDiv" ></div>

<script type="text/javascript">
    CKEDITOR.replace( 'editor1' );

</script>

Let try this..

Update :

To set data :

Create instance First::

var editor = CKEDITOR.instances['editor1'];

Then,

editor.setData('your data');

editor.insertHtml('your html data');

editor.insertText('your text data');

And Retrieve data from your editor::

editor.getData();

If change the particular para HTML data in CKEditor.

var html = $(editor.editable.$);
$('#id_of_para',html).html('your html data');

These are the possible ways that I know in CKEditor

回答7:

As now to day CKEditor 4+ launched we have to use it.ekeditor 4 setData documentation

CKEDITOR.instances['editor1'].setData(value);

Where editor1 is textarea Id.

Old methods such as insertHtml('html data') and insertText('text data') also works fine.

and to get data use

var ckdata =  CKEDITOR.instances['editor1'].getData();
var data = CKEDITOR.instances.editor1.getData();

Ckedtor 4 documentation

回答8:

Sets the editor data. The data must be provided in the raw format (HTML). CKEDITOR.instances.editor1.setData( 'Put your Data.' ); refer this page

回答9:

Take care to strip out newlines from any string you pass to setData(). Otherwise an exception gets thrown.

Also note that even if you do that, then subsequently get that data again using getData(), CKEditor puts the line breaks back in.

回答10:

I tried this and worked for me.

success: function (response) {
    document.getElementById('packageItems').value = response.package_items;

    ClassicEditor
    .create(document.querySelector('#packageItems'), {
        removePlugins: ['dragdrop']
    })
    .then(function (editor) {
        editor.setData(response.package_items);
    })
    .catch(function (err) {
        console.error(err);
    });
},

来源：https://stackoverflow.com/questions/3610010/how-do-i-set-a-value-in-ckeditor-with-javascript

标签

javascript

ckeditor