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

Posted 2023-02-16

【中文标题】如何使用 Javascript 在 CKEditor 中设置值？

【英文标题】：How do I set a value in CKEditor with Javascript?

【发布时间】：2011-04-06 07:37:39

【问题描述】：

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

我尝试了以下方法，但它们都不起作用......

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

但是，这两种方法都可以在没有应用编辑器的情况下工作。有没有办法用编辑器做到这一点？

【问题讨论】：

17 个月后我又遇到了同样的问题。是否有“重新发现我很久以前回答过这个问题。谢谢，我”徽章？

【参考方案1】：

我试过这个并为我工作。

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

【参考方案2】：

CKEditor 4+ 发布到今天，我们必须使用它。ekeditor 4 setData documentation

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

editor1 是 textarea Id。

inserthtml('html data') 和 insertText('text data') 等旧方法也可以正常工作。

并获取数据使用

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

Ckedtor 4 documentation

【讨论】：

我没有在浏览器控制台找到CKEDITOR实例，但我终于在window.CKEDITOR找到了

@QiushiHuang，你在浏览器控制台上找不到它，但它工作正常，我认为答案是针对适当的问题而不是如何找到实例。

【参考方案3】：

<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 中更改特定的 para HTML 数据。

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

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

【参考方案4】：

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

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

【参考方案5】：

使用CKEditor方法setData()：

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

【讨论】：

感谢您的代码正在运行但我输入了 CKEDITOR.instances.**ckeditorname**.setData(yourdata)

文档here

我添加了将 ckeditorname 替换为被呈现为 CkEditor 的 textarea 的 id。例如：JavaScript：CKEDITOR.instances["my-content"].setData("

【参考方案6】：

试试这个

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

【参考方案7】：

设置编辑器数据。数据必须以原始格式 (HTML) 提供。 CKEDITOR.instances.editor1.setData('把你的数据。'); refer this page

【讨论】：

谢谢兄弟，这对我很有用。

【参考方案8】：

我使用了下面的代码，它可以正常工作->

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

这里-> CKEDITOR ->您的编辑姓名， mail_msg -> 你的文本区域的 ID（你绑定了 ckeditor）， obj["template"]->是你要绑定的值

【讨论】：

不起作用。这样做：CKEDITOR.instances.taCKEDITOR_Email.setData('

@FrenkyB，在 CKEDITOR 中使用 setData() 时如何将原始 HTML 文本转换为富文本？

【参考方案9】：

注意从传递给setData(). 的任何字符串中去掉换行符，否则会引发异常。

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

【参考方案10】：

使用insertHtml() 或insertText() 方法。

【讨论】：

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