javascript - 无法在第二个或第三个删除的动态元素上触发 CK 编辑器 - CkEditor

Question

我在网上查了所有的解决方案，都无法修复。

我正在开发一种 CMS，我将 HTML 小部件拖放到 DOM 中，我需要将 CK 编辑器应用于动态生成的元素，但我在这里遇到了一些问题。

下面是放置小部件时触发的代码:

  //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 编辑的元素数量。

请参阅here对于那些。

This是一个非常好的资源，您可以特别了解您的案例。

请注意，您也可以将元素 ID 传递给 CKEditor。

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