javascript - 如何将数据加载到ckeditor onload

Question

是否可以在不使用 JQuery 的情况下将数据加载到 ckeditor 中？如果可能的话，我想为此使用内联脚本标记。我能找到的所有示例都处理 Jquery，这在我的情况下并不是最佳的。

到目前为止，我在 CKs 网站上找到的示例是：

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

我尝试将它与内联脚本标签一起使用，但它会使编辑器崩溃。如果我在 JQuery 中使用它，它将按预期工作。

Answer 1

这是一个使用 CKEDITOR API 而不使用 jQuery 的示例。请注意替换函数的调用，该函数使用 textarea 内容初始化 CKEDITOR 的“editor1”实例。我认为这将是填充 onload 内容的最简单方法，但如果这还不够，您可以看到我已使用您问题中的代码用“其他一些编辑器数据”填充 CKEDITOR。

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

​</p>

http://jsfiddle.net/cDzqp/

Answer 2

我知道这个问题很老，但我刚刚想出了我的解决方案，而且我认为它更干净，所以我在这里为将来可能遇到同样问题的人加两分钱。

CKEditor 使用原来在旧文本区域中的内容自动设置新文本区域的内容，替换一个。换句话说，改变textarea的内容然后调用replace命令就足够了。这将是代码：

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

完毕 ：）

Answer 3

如果有人正在寻找将内容附加到 CKEditor 中现有内容的解决方案，这将有所帮助。- 我正在使用 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
});

根据我的要求修改，基于 Patrick Jones 的回答

谢谢

Answer 4

将输入数据转换为 HTML 以加载到编辑器中。虽然编辑器能够处理非 HTML 数据（如 BBCode），但它只能在运行时处理 HTML 数据。数据处理器的作用就是通过这个函数把输入的数据转换成HTML。

见源

// 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>'