在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>

这里有一个标题
这是副标题
这里有一段

这里有一段

这里有一段

现在，假设我引用了第二个

元素。在该标记之前插入html的最佳方式是什么？（请记住，我要插入的HTML在插入后将成为Ckeditor小部件。）

非常感谢您的帮助

Michael

使用当前API，在不涉及选择的情况下，不可能在特定位置插入HTML字符串（编辑：由于CKEditor 4.5.0，它是可能的–请阅读下文），因为该方法在选择位置插入。但是，如果您的HTML字符串只包含一个元素（带有一些祖先元素），那么您可以在较低的级别上轻松使用，当您可以指定要插入元素的范围时：

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

var range=editor.createRange（），
element=CKEDITOR.dom.element.createFromHtml（elementHtml）；
//将范围置于元素之前。
范围.设置开始（元件P，CKEDITOR.POSITION在开始前）；
//确保它是折叠的。
范围。塌陷（真）；
//在范围位置插入元素。
editor.editable（）.insertElement（元素，范围）；

正如您所看到的，这段代码使用的是

editor.insertElement

请记住，

insertElement

不会向上投射和初始化小部件。你可以在这里找到更多信息-

从4.5.0开始

---

引入了CKEditor 4.5.0以及的

范围

参数。后一种方法是更高级的方法，因此它将负责撤消管理器和设置选择以代替插入。前者更像是一种低级方法，它只插入数据。

如果要在段落之间或之外插入元素 ，该标志将不起作用，因为元素仍将放置在

节点内

但是，该方法将新元素放置在任何编辑器节点之前，而不将其包装或限制为文本节点

var startRange = editor.getSelection(); //Cursor position
var parent = startRange.getStartElement(); //The parent <p> or <span> of the cursor

var e1 = CKEDITOR.dom.element.createFromHtml("<h3>Subtitle before paragraphs</h3>");
parent.insertBeforeMe(e1); //Places new node before the specified node

var startRange=editor.getSelection（）//光标位置
var parent=startRange.getStartElement（）//光标的父级或
var e1=CKEDITOR.dom.element.createFromHtml（“段落前的副标题”）；
parent.insertBeforeMe（e1）//将新节点放置在指定节点之前

---

希望这有帮助

就这么简单

$（文档）.ready（函数（）{
$（“#添加1”）。单击（函数（）{
CKEDITOR.instances.editor2.insertHtml（“
计算机和电子设备”
”）；
});
});