如何使用Javascript在CKEditor中设置一个值？

Question

我想知道如何使用Javascript在CKEditor中设置值？

我尝试了下面的方法，但它们都没有成功...

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

然而，这两种方式在未应用编辑器时都可以正常工作。有没有办法在应用编辑器的情况下实现这个功能呢？

- dcp3450

---

我再次遇到了相同的问题，距离上一次已经过去了17个月。是否可以有一个“重新发现我早就回答了这个问题。谢谢，我自己”徽章？ - Wick

Answer 1

使用 CKEditor 的 setData() 方法：

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

- efeyc

---

谢谢，你的代码运行正常。但是我使用了CKEDITOR.instances.ckeditorname.setData(yourdata)。 - r.vengadesh

请点击此处查看相关编程文档：http://docs.ckeditor.com/#!/api/CKEDITOR.editable-method-setData - reergymerej

我需要将ckeditorname替换为正在呈现为CkEditor的文本区域的ID。例如：JavaScript：CKEDITOR.instances ["my-content"] .setData（"<p>Hello World</ p>"）; HTML：<textarea id =“ my-content” cols =“ 80” name =“ profile” rows =“ 10”> </ textarea> - Alex Sanséau

有没有办法在React JSX中使用属性来实现这个？例如：<CKE className =“”，value = {prefilledData}> </CKE>？ - Mars2024

Answer 2

insertHtml()和insertText()方法将向编辑器窗口插入数据，添加到已有的内容中。

然而，要替换整个编辑器内容，请使用setData()。

- Wick

Answer 3

Use insertHtml() or insertText() method.

- Anpher

---

这些在插入符号位置插入新内容。setData()替换整个内容。 - oleq

Answer 4

试一试

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

- Sunil kumar

Answer 5

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

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

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

</script>

让我们试试这个...

更新：

设置数据：

首先创建一个实例：

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

那么，

editor.setData('your data');

或者

editor.insertHtml('your html data');

或者

editor.insertText('your text data');  

从您的编辑器中检索数据：

editor.getData();

如果要在CKEditor中更改特定段落的HTML数据。

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

这是我在CKEditor中所知道的可能方式。

- Mari Selvan

Answer 6

我使用了下面的代码，并且它按照描述正常工作：

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

这里-> CKEDITOR ->您的编辑器名称， mail_msg ->您文本区域的ID（将其绑定到 CKEditor）， obj["template"]->是您想要绑定的值

- Sachin Shukla

---

不行。这个可以：CKEDITOR.instances.taCKEDITOR_Email.setData('<b><h1>测试</h1></b>') - FrenkyB

@FrenkyB，当在CKEDITOR中使用setData（）时，您如何将原始HTML文本转换为富文本？ - Mahesh

Answer 7

由于现在CKEditor 4+已经发布，我们必须使用它。CKEditor 4 setData文档

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

其中 editor1 是文本域的 Id。

旧的方法，例如 insertHtml('html data') 和 insertText('text data') 也可以正常工作。

要获取数据，请使用

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

Ckedtor 4 文档

- Deva

---

我在浏览器控制台中没有找到CKEDITOR实例，但最终我在window.CKEDITOR中找到了它。 - Qiushi Huang

@QiushiHuang，你在浏览器控制台上找不到它，但它运行良好，我认为答案是针对适当的问题而不是如何找到实例。 - Deva

Answer 8

设置编辑器数据。数据必须以原始格式（HTML）提供。 CKEDITOR.instances.editor1.setData('放置您的数据。'); 参考此页面

- Satya Prakash

---

谢谢兄弟，这对我很有用。 - Bijender Singh Shekhawat

Answer 9

我尝试了这个方法，对我有效。

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);
    });
},

- Dhanushka Udayanga

Answer 10

请注意，如果您在传递给 setData() 的任何字符串中保留换行符，则会抛出异常。因此，请务必删除它们。

另外请注意，即使您这样做了，然后使用 getData() 再次获取该数据，CKEditor 也会重新添加换行符。

- bcr