在 CKEditor 中的元素之前插入 HTML答案

【问题标题】：Insert HTML before an element in CKEditor在 CKEditor 中的元素之前插入 HTML
【发布时间】：2014-04-28 04:04:01
【问题描述】：

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

非常感谢您的帮助，

迈克尔

【问题讨论】：

标签： ckeditor

【解决方案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 );

如您所见，此代码使用editable.insertElement，editor.insertElement 使用它。

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

自 4.5.0 起

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

【讨论】：

哇，这是一个了不起的答案。我希望我能不止一次地支持你。非常感谢！我相信这会对其他搜索相同内容的人有所帮助。
我更新了我的答案，因为 CKEditor 4.5.0 带来了一些好东西。
这是一个绝妙的答案！！！但它需要更新。变量 elementP 也未初始化。您能否更新答案以免创建新线程？谢谢:) !!

【解决方案2】：

如果你想在段落之间插入一个元素或段落之外 ，CKEDITOR.POSITION_BEFORE_START 标志将不起作用，因为该元素仍将放置在内部 <p></p> 节点。

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

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

希望这会有所帮助！

【讨论】：

【解决方案3】：

就这么简单

$(document).ready(function(){
    $("#add1").click(function(){
       CKEDITOR.instances.editor2.insertHtml( '<ul><li>Computers & Electronics</li></ul>' );
    });
 });

【讨论】：