ckeditor - 在 CKEditor 中的元素之前插入 HTML

Question

在 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 小部件。)

非常感谢您的任何帮助，

迈克尔

Answer 1

使用当前的 API，不可能在不涉及选择的情况下在特定位置插入 HTML 字符串( EDIT :由于 CKEditor 4.5.0 是可能的 - 阅读下文)，因为 editor.insertHtml 方法在选择位置插入。然而，如果你的 HTML 字符串只包含一个元素(有一些祖先)，那么你可以很容易地使用 editor.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 ，由 editor.insertElement 使用.

附注。请记住 insertElement不会向上转换和初始化您的小部件。您可以在此处找到更多相关信息 - CKEditor, initialize widget added with insertElement .

从 4.5.0 开始

CKEditor 4.5.0 推出 editor.editable().insertHtmlIntoRange() 以及 range editor.insertHtml() 的参数.后一种方法是一种更高级的方法，因此它将处理撤消管理器和设置选择来代替插入。前者更像是一种低级方法，它只插入数据。