Вставка HTML перед элементом в CKEditor

каков наилучший способ программной вставки HTML (представляющего виджет CKEditor) перед существующим элементом в 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 после вставки.)

большое спасибо за любую помощь,

Михаил

6
ckeditor

3 ответов

С в текущем 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() а также

7

Если вы хотите вставить элемент между или за пределами пунктов тег С CKEditor.POSITION_BEFORE_START флаг не будет работать, потому что элемент все равно будет помещен внутри на <p></p> узел.

однако С CKEditor.дом.узел.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

надеюсь, что это помогает!

0

его гладко просто, как это

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