Flask项目中HTML/JavaScript动态添加CKEditor富文本编辑器问题：后续实例显示为textarea且多实例出现合并

一、先解决动态添加的CKEditor无法初始化的核心问题 #

你当前的代码里，虽然调用了CKEDITOR.replaceAll('ckeditor')，但存在两个关键问题：

• 重复的id属性：所有textarea和容器div都用了相同的id="f_element[]"和id="inputFormFormalElements"，ID在DOM中必须唯一，这会导致CKEditor初始化时出现识别混乱。
• 重复初始化已存在的编辑器：每次点击添加按钮都调用replaceAll，会把已经初始化好的CKEditor重新处理一遍，破坏原有DOM结构。

二、解决字段合并的问题 #

你提到添加第三个及以后字段时出现元素合并，主要原因有两个：

1. 未闭合的HTML标签：动态添加的代码里，append的内容缺少闭合的</div>，导致新添加的元素被错误嵌套到之前的容器里，视觉上就出现了合并。
2. 重复ID导致的样式/选择器冲突：多个元素用同一个ID，浏览器渲染时会出现不可预期的布局问题。

修正后的完整代码 #

HTML部分（仅修改ID为类名，保持结构）

<div class='f_elements'> 
  <div class='inputFormFormalElements'> 
    <textarea name="f_element[]" class="ckeditor"></textarea> 
    <button type="button" class="btn btn-danger removeFormalElement">Remove</button> 
  </div> 
  <div id="newFormalElement"></div> 
  <button id="addFormalElement" type='button' class="btn btn-info">Add a slot</button> 
</div>

JavaScript部分（修复结构、唯一化处理、正确初始化CKEditor）

// 添加字段逻辑
$(document).on('click', '#addFormalElement', function(){
  // 生成唯一的容器结构，闭合标签，用类代替ID
  const newElement = `
    <div class='inputFormFormalElements'>
      <textarea name="f_element[]" class="ckeditor"></textarea>
      <button type="button" class="btn btn-danger removeFormalElement">Remove</button>
    </div>
  `;
  $("#newFormalElement").append(newElement);
  
  // 只初始化刚添加的那个textarea，避免重复处理已有编辑器
  const lastTextarea = $("#newFormalElement").find('.ckeditor').last();
  CKEDITOR.replace(lastTextarea[0]);
});

// 删除字段逻辑
$(document).on("click", ".removeFormalElement", function(){
  // 用类选择器，找到当前按钮的父容器删除
  $(this).closest('.inputFormFormalElements').remove();
});

关键修改点说明 #

• 替换ID为类名：把所有重复的id="inputFormFormalElements"和id="removeFormalElement"改成类名，确保DOM元素唯一性，避免选择器冲突。
• 闭合HTML标签：动态添加的HTML完整闭合</div>，防止元素嵌套错误。
• 精准初始化CKEditor：每次添加后只针对新创建的textarea调用CKEDITOR.replace，而不是全局replaceAll，避免破坏已有的编辑器实例。
• 删除逻辑优化：通过类选择器绑定删除事件，确保点击哪个按钮就删除对应的容器。

这样修改后，不仅能让每个动态添加的textarea都正确渲染成CKEditor，也能解决字段合并的布局问题，同时不影响你后端Python收集f_element[]列表的逻辑。

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