在 CKEditor 中的元素之前插入 HTML

在 CKEditor 中的现有元素之前以编程方式插入 HTML（代表 CKEditor 小部件）的最佳方法是什么？

可编辑内容未获得焦点且当前未被编辑。

例如，假设编辑器的内容是：

<h1>Here's a title</h1>
<h2>Here's a subtitle</h2>
<p>Here's a paragraph</p>
<p>Here's a paragraph</p>
<p>Here's a paragraph</p>

现在，假设我参考了第二个<p>元素。在此标签之前插入 html 的最佳方法是什么？ （请记住，我想要插入的 HTML 在插入后将成为 Ckeditor 小部件。）

非常感谢您的帮助，

Michael

使用当前的API，不可能在不涉及选择的情况下在特定位置插入HTML字符串（EDIT：从 CKEditor 4.5.0 开始这是可能的 - 请阅读下文），因为editor.insertHtml http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-insertHtml方法在选择位置插入。但是，如果您的 HTML 字符串仅包含一个元素（具有一些祖先），那么您可以轻松使用editor.insertElement http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-insertElement在较低级别，当您可以指定要插入元素的范围时：

var range = editor.createRange(),
    element = CKEDITOR.dom.element.createFromHtml( elementHtml );

// Place range before the <p> element.
range.setStartAt( elementP, CKEDITOR.POSITION_BEFORE_START );
// Make sure it's collapsed.
range.collapse( true );

// Insert element at the range position.
editor.editable().insertElement( element, range );

正如你所看到的，这段代码使用了editable.insertElement http://docs.ckeditor.com/#!/api/CKEDITOR.editable-method-insertElement，其使用者为editor.insertElement.

附言。请记住insertElement不会向上转换并初始化您的小部件。您可以在这里找到更多相关信息 -CKEditor，初始化用 insertElement 添加的小部件 https://stackoverflow.com/questions/20237845/ckeditor-initialize-widget-added-with-insertelement/20245520#20245520.

从 4.5.0 开始

CKEditor 4.5.0 推出editor.editable().insertHtmlIntoRange() http://docs.ckeditor.com/#!/api/CKEDITOR.editable-method-insertHtmlIntoRange以及ASArange参数为editor.insertHtml() http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-insertHtml。后一种方法是更高级别的方法，因此它将处理撤消管理器和设置选择来代替插入。前一种方法是一种低级方法，它仅插入数据。