拖拽动态元素后CKEditor无法在第二/第三个元素上触发的问题

我已经查阅了各类在线方案，但仍无法解决问题。我正在开发一款CMS，支持将HTML组件拖拽到DOM中，需要为动态生成的元素应用CKEditor，但遇到了问题：首次拖拽时功能正常，但第二次拖拽动态元素时，CKEditor无法在该元素上触发，且编辑器显示位置与目标段落元素存在偏移。

以下是组件拖拽完成时触发的代码：

//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'];
    }
}

我曾尝试.replace、.editable方法，但均无效。请问当前方案是否适用？若适用该如何修复？

问题分析 #

你的核心问题出在元素选择不准确和CKEditor实例管理混乱上，同时可能存在DOM元素未完全渲染就初始化编辑器的情况：

1. 选择器错误：你用$(event.target).find('p')，但$(event.target).after(DropableTemplate)是把模板插入到event.target的后面，而非作为它的子元素，所以find('p')根本找不到刚添加的段落元素——第一次能用大概率是原event.target里刚好有p标签，第二次自然就失效了。
2. 实例管理不当：硬删除editor1实例毫无意义，动态生成的元素不会自动复用这个固定id，反而容易引发实例冲突；而且你没有检查元素是否已经绑定了CKEditor实例，重复初始化会导致异常。
3. 位置偏移：如果元素还没完全插入DOM并完成渲染就初始化CKEditor，编辑器会基于元素当时的临时位置计算布局，最终导致显示偏移。

修复方案 #

这里给你调整后的代码，一次性解决上述所有问题：

drop: function (event, ui) {
    // 获取模板内容
    var dropableTemplate = ui.draggable.attr("data-template");
    // 将模板插入到目标元素后面，并保存新添加的DOM元素对象
    var newElement = $(dropableTemplate).insertAfter(event.target);
    // 从新添加的元素中找到需要初始化CKEditor的p标签
    var editableElements = newElement.find('p');

    editableElements.each(function(index, element) {
        // 先检查该元素是否已经绑定了CKEditor实例，避免重复初始化
        if (!CKEDITOR.instances[element.id]) {
            // 如果元素没有id，给它生成一个唯一id，方便后续管理实例
            if (!element.id) {
                element.id = 'ckeditor-inline-' + Date.now() + '-' + index;
            }
            // 初始化inline编辑器，可按需添加配置
            CKEDITOR.inline(element, {
                toolbar: ['Bold', 'Italic', 'Link', 'Unlink', 'RemoveFormat']
            });
        }
    });
}

关键改进点说明 #

• 准确选择新元素：用insertAfter返回的对象直接操作刚添加的DOM元素，确保能精准定位到需要初始化的p标签。
• 唯一标识元素：给每个动态生成的p标签生成唯一id，彻底避免CKEditor实例冲突，也方便后续对实例进行销毁、更新等操作。
• 实例存在性检查：初始化前先判断元素是否已绑定CKEditor实例，防止重复初始化引发的异常。
• 确保DOM就绪：通过insertAfter直接操作已插入DOM的元素，避免未渲染完成就初始化编辑器，解决位置偏移问题。

如果仍存在位置偏移的情况，可以尝试把初始化代码放到setTimeout里延迟100ms，确保元素完全渲染：

setTimeout(function() {
    // 上述初始化代码放在此处
}, 100);

内容的提问来源于stack exchange，提问作者Zeeshan Adil