在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字符串(编辑:因为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,初始化使用insertElement添加的小部件.

从4.5.0开始

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