не может запустить редактор CK на втором или третьем упавшем динамическом элементе - CkEditor

Question

Я проверил все решения онлайн, но не могу это исправить.

Я работаю над своего рода CMS, где я перетаскиваю HTML-виджеты в DOM, и мне нужно применить CK Editor к динамическисгенерированные элементы, но я сталкиваюсь здесь с некоторыми проблемами.

Вот код, который срабатывает при удалении виджета:

  //Triggered when an accepted draggable is dropped on the droppable
            drop: function (event, ui) {

//dropable Template here is complete HTML content
 var DropableTemplate = ui.draggable.attr("data-template");

//appending to event target
$(event.target).after(DropableTemplate);

// getting the editable [p] content from it
  var elementforCkEditor = $(event.target).find('p');

//I found this solution online 

                var i;
                for (i = 0; i < elementforCkEditor.length; i++) {
                    CKEDITOR.inline(elementforCkEditor .get(i))
                    delete CKEDITOR.instances['editor1'];
                }

Это работает хорошо в первый раз, но когда я отбрасываювторой динамический элемент, он не запускает редактор CK.

показывает редактор немного далеко от фактического элемента, в данном случае, абзаца

это правильное решение для этого конкретного случая?если да, как я могу это исправить?

Я пробовал .replace, .editable, но они не работают.

Answer 1

elementforCkEditor.get(0)

В приведенном выше операторе вы получаете первый элемент выбора JQuery.

Несколько вещей, на которых стоит сосредоточиться

CKEditor ожидает, что редактируемый элементсодержит атрибут contenteditable=true

Кроме того, разрешено количество элементов, которые можно редактировать через CKEditor.

Пожалуйста, смотрите здесь для тех.

Этот является очень хорошим источником, который вы можете узнать, в частности, о своем деле.

Обратите внимание, что вы также можете передать идентификатор элемента CKEditor.

CKEDITOR.inline( 'my-id', {
    startupFocus: true
} );