如何为多个同名动态新增的textarea添加CKEditor富文本编辑器

以下方案同时兼容页面初始加载的固定textarea和后续动态新增的textarea： #

1. 先编写通用初始化函数 #

函数会自动过滤已初始化的文本框，避免重复绑定报错：

function initResearchProjectEditor() {
  // 匹配所有name为research_projects[]、且未初始化过的textarea
  const targetTextareas = document.querySelectorAll('textarea[name="research_projects[]"]:not([data-ck-initialized])');
  
  targetTextareas.forEach(textarea => {
    // 标记为已初始化
    textarea.dataset.ckInitialized = '1';

    // ===== 以下为CKEditor 4初始化代码，用CKEditor 5的话替换对应部分即可 =====
    CKEDITOR.replace(textarea, {
      // 可自定义编辑器配置，例如高度、工具栏、插件等
      height: 220,
      toolbar: [
        ['Bold', 'Italic', 'Underline', 'Link', 'BulletedList', 'NumberedList']
      ]
    });

    /* ===== CKEditor 5 经典版初始化参考代码 =====
    ClassicEditor
      .create(textarea, {
        // 自定义配置
      })
      .then(editor => {
        // 把编辑器实例挂载到对应DOM上，后续销毁/取内容更方便
        textarea.ckInstance = editor;
      })
      .catch(err => {
        console.error('编辑器初始化失败:', err);
      });
    */
  });
}

2. 初始化页面现有文本框 #

页面DOM加载完成后，调用一次初始化函数，加载初始的2个textarea的编辑器：

document.addEventListener('DOMContentLoaded', () => {
  // 确保CKEditor资源加载完成后再执行初始化
  initResearchProjectEditor();
});

3. 处理动态新增的textarea #

在你每次动态插入新的research_projects[]文本框DOM节点之后，主动调用一次initResearchProjectEditor()函数即可，函数会自动给新增的未初始化文本框绑定编辑器，不会影响已经绑定过的旧文本框。 #

补充注意事项：

• 表单提交前如果需要同步编辑器内容到原textarea，CKEditor 4可全局调用for (const ins in CKEDITOR.instances) CKEDITOR.instances[ins].updateElement()；CKEditor 5会自动同步，如有异常可手动将ckInstance.getData()赋值给textarea的value属性。
• 如果要删除某一行项目块，建议先销毁对应编辑器实例再删除DOM，避免内存泄漏：CKEditor 4调用CKEDITOR.instances[对应实例ID].destroy()，CKEditor 5调用textarea.ckInstance.destroy()即可。

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