动态复制CKEditor后编辑器无法输入功能问题排查

我来帮你搞定这个问题！你遇到的核心问题是：动态新增的textarea没有被CKEditor正确初始化。

为什么会出现这个问题？ #

页面加载完成后，你只执行了一次CKEditor的初始化逻辑，遍历当时页面上已有的.editor元素并替换成编辑器。但当你通过点击「Add」按钮动态插入新的HTML片段后，新生成的.editor文本域并没有被CKEditor接管——虽然它看起来显示了编辑器的界面，但实际上没有绑定输入交互的核心逻辑，所以无法输入内容。

修复步骤 #

只需要在添加完新的字段组之后，针对新插入的.editor元素单独初始化CKEditor即可。修改你的JavaScript代码如下：

$(document).ready(function() { 
    var allEditors = document.querySelectorAll('.editor'); 
    for (var i = 0; i < allEditors.length; ++i) { 
        CKEDITOR.replace(allEditors[i]); 
    } 
    //section add limit 
    var maxGroup = 10; 
    //add more section 
    $(".addMore").click(function() { 
        if ($('body').find('.fieldGroup').length < maxGroup) { 
            var fieldHTML = '<div class="row fieldGroup">' + $(".fieldGroupCopy").html() + '</div>'; 
            $('body').find('.fieldGroup:last').after(fieldHTML);
            
            // 新增：初始化刚添加的textarea为CKEditor
            var newEditor = $('body').find('.fieldGroup:last .editor')[0];
            CKEDITOR.replace(newEditor);
            
        } else { 
            alert('Maximum ' + maxGroup + ' sections are allowed.'); 
        } 
    }); 
    //remove fields 
    $("body").on("click", ".remove", function() { 
        // 额外优化：删除字段组时销毁对应的CKEditor实例，避免内存泄漏
        var targetEditor = $(this).parents(".fieldGroup").find('.editor')[0];
        var editorInstance = CKEDITOR.instances[targetEditor.name];
        if (editorInstance) {
            editorInstance.destroy();
        }
        $(this).parents(".fieldGroup").remove(); 
    }); 
}); 

额外优化说明 #

我还加了一段删除字段时销毁CKEditor实例的代码，这样可以避免页面上存在大量未使用的编辑器实例，造成内存浪费。

另外，顺便提个小问题：你的所有sectionTitle输入框都用了相同的id="sectionTitle"，这不符合HTML规范（id必须唯一），建议去掉这个id，或者动态生成唯一id（比如sectionTitle-1、sectionTitle-2），避免潜在的DOM选择问题。

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