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字符串~~（编辑：因为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 );

正如您所看到的，此代码使用editor.insertElement使用的editable.insertElement。

PS。请记住insertElement不会对您的小部件进行向上和初始化。你可以在这里找到更多相关信息 - CKEditor, initialize widget added with insertElement。

自4.5.0以来

CKEditor 4.5.0引入了editor.editable().insertHtmlIntoRange()以及editor.insertHtml()的range参数。后一种方法是更高级别的方法，因此它将负责撤消管理器和设置选择而不是插入。前者更像是一种低级方法，只插入数据。

Answer 2

如果要在段落的之间插入元素，CKEDITOR.POSITION_BEFORE_START标志将不起作用，因为该元素仍将放置在<{1}}节点内。

但是，CKEDITOR.dom.node.insertBeforeMe()方法会将新元素放在任何编辑器节点之前，而不将其包装或将其限制在文本节点中。

<p></p>

希望这有帮助！

Answer 3

它如此简单

</div>

在CKEditor中的元素之前插入HTML

3 个答案:

自4.5.0以来