动态添加CKEditor 5文本域后，仅首个编辑器数据可存入数据库

问题根源 #

你所有的textarea都用了相同的id="editor"，HTML里ID必须唯一。CKEditor初始化时会优先绑定第一个匹配到的元素，后续动态创建的编辑器没法正确关联到对应的textarea，导致表单提交时只有第一个编辑器的内容同步到了textarea，其他的textarea还是空值，所以数据库里存不到数据。另外你用的.ckeditor()是CKEditor 4的写法，CKEditor 5不兼容这个方法，也会导致初始化异常。

修复步骤 #

1. 移除重复ID，改用class标识编辑器容器
   把初始和模板里的textarea的id="editor"删掉，换成class="ck-editor-textarea"，这样可以通过class批量选择需要初始化的元素，同时避免ID冲突。

2. 改用CKEditor 5官方初始化API
   CKEditor 5需要用ClassicEditor.create()（如果用的是经典编辑器）来初始化，替代旧的.ckeditor()方法，确保每个动态创建的textarea都能正确绑定编辑器。

3. 表单提交前强制同步所有编辑器内容
   为了确保所有编辑器的内容都同步到对应的textarea，在表单提交时遍历所有编辑器实例，调用updateSourceElement()方法手动同步。

修改后的完整代码 #

HTML部分

<a href="javascript:void(0)" class="btn btn-success" id="rowAdder">
  <i class="fa fa-plus" aria-hidden="true"></i> Add
</a>
<div class="fieldGroup">
  <textarea class="form-control ck-editor-textarea" name="containment_action[]" placeholder=""></textarea>
</div>
<div id="fieldGroupTemplate" style="display:none">
  <textarea class="form-control ck-editor-textarea" name="containment_action[]" placeholder=""></textarea>
</div>

JavaScript部分

// 全局存储编辑器实例，方便后续同步
const editorInstances = [];

$("#rowAdder").click(function() {
  const numGroups = $('.fieldGroup').length;
  if (numGroups < maxGroup) {
    // 创建新的字段组
    const $fieldHTML = $('<div>', {
      'class': 'row fieldGroup border-top pt-5',
      'html': $("#fieldGroupTemplate").html()
    });

    $('.fieldGroup:last').after($fieldHTML);

    // 初始化CKEditor 5到新的textarea
    const textarea = $fieldHTML.find('.ck-editor-textarea')[0];
    ClassicEditor.create(textarea)
      .then(editor => {
        editorInstances.push(editor);
      })
      .catch(error => {
        console.error(error);
      });
  } else {
    alert(`Maximum ${maxGroup} sections are allowed.`);
  }
});

// 表单提交前同步所有编辑器内容
$('form').submit(function(e) {
  editorInstances.forEach(editor => {
    editor.updateSourceElement();
  });
});

额外说明 #

• 确保你已经正确引入了CKEditor 5的资源文件（比如经典编辑器的JS和CSS）
• 如果使用的是CKEditor 5的其他编辑器类型（比如InlineEditor），只需要把ClassicEditor换成对应的编辑器类即可

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