在CKEditor中的元素之前插入HTML [英] Insert HTML before an element in CKEditor

问题描述

在CKEditor的现有元素之前以编程方式插入HTML（代表CKEditor小部件）的最佳方法是什么？

可编辑内容不是焦点，

例如，假设编辑器的内容是：

 < h1>此处为标题< / h1> 
< h2>以下是字幕< / h2> 
< p>这里是一段< / p> 
< p>这是一段< / p> 
< p>这是一段< / p> 
  

现在，假设我引用了第二个< p& / code>元素。在这个标签之前插入html的最好方法是什么？ （请记住，我要插入的HTML在插入后将成为Ckeditor小部件。）

非常感谢您的任何帮助，

Michael

解决方案

使用当前API不可能插入HTML字符串在特定位置，而不涉及选择（ EDIT ：因为CKEditor 4.5.0可能 - 见下文），因为 editor.insertHtml 方法插入到选择位置。但是，如果你有一个简单的情况，你的HTML字符串只包含一个元素（有一些祖先），那么你可以很容易地使用 editor.insertElement ，当您可以指定要插入元素的范围时：

  var range = editor.createRange（），
 element = CKEDITOR.dom.element.createFromHtml（elementHtml）; 
 
 //将范围置于< p>元件。 
 range.setStartAt（elementP，CKEDITOR.POSITION_BEFORE_START）; 
 //确保它已折叠。 
 range.collapse（true）; 
 
 //在范围位置插入元素。 
 editor.editable（）。insertElement（element，range）; 
  

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

PS。请记住， insertElement 不会上传并初始化您的窗口小部件。您可以在这里找到更多相关信息 - CKEditor，使用insertElement 。

从4.5.0开始

CKEditor 4.5.0介绍 editor.editable（）。insertHtmlIntoRange（） 以及范围参数rel =nofollow> editor.insertHtml（） 。后一种方法是更高级的方法，因此它将处理undo管理器和设置选择以代替插入。前者更是一个低级方法，它只插入数据。

What is the best way to programmatically insert HTML (that represents a CKEditor widget) before an existing element in CKEditor?

The content editable is not in focus and is not currently being edited.

For example, suppose the contents of the editor are:

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

Now, say I have a reference to the second <p> element. What is the best way to insert html before this tag? (Keeping in mind that the HTML that I want to insert will become a Ckeditor widget after inserting.)

Thank you very much for any help,

Michael

解决方案

With the current API it is not possible to insert HTML string at the specific position without involving selection (EDIT: since CKEditor 4.5.0 it is possible – read below), because the editor.insertHtml method inserts in the selection position. However, if you have a simple situation that your HTML string contains just one element (with some ancestors), then you can easily use editor.insertElement on a lower level, when you can specify range at which you want to insert element:

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

As you can see this code uses editable.insertElement, which is used by editor.insertElement.

PS. Remember that insertElement will not upcast and initialize your widget. You can find more about this here - CKEditor, initialize widget added with insertElement.

Since 4.5.0

CKEditor 4.5.0 introduced editor.editable().insertHtmlIntoRange() as well as a range parameter for editor.insertHtml(). The latter method is a more high-level one, so it will take care of undo manager and setting selection in place of insertion. The former one is more a low-level method and it only inserts the data.

这篇关于在CKEditor中的元素之前插入HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！