在 HTML/JavaScript 中动态添加富文本编辑器（后续实例改为生成文本区域）答案

【问题标题】：Adding rich text editors dynamically in HTML/JavaScript (subsequent instances produce text areas instead)在 HTML/JavaScript 中动态添加富文本编辑器（后续实例改为生成文本区域）
【发布时间】：2022-10-05 21:34:53
【问题描述】：

我有一个烧瓶网络应用程序，我试图在 HTML 模板中动态添加富文本编辑器。但是，只有第一个字段是富文本编辑器，其他字段显示为 textareas。

这是第一个富文本编辑器框，带有添加新按钮和删除按钮的按钮 (HTML)：

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

编辑：这是动态添加新字段的脚本：

    $(document).on(\'click\', \'#addFormalElement\', function(){
        $(\"#newFormalElement\").append(\'<div id=\"inputFormFormalElements\"><textarea name=\"f_element[]\" id=\"f_element[]\" class=\"ckeditor\"></textarea><button id=\"removeFormalElement\" type=\"button\" class=\"btn btn-danger\">Remove</button>\');
        CKEDITOR.replaceAll(\'ckeditor\');
    });

    $(document).on(\"click\", \"#removeFormalElement\", function(){
        $(this).closest(\'#inputFormFormalElements\').remove();
    });

编辑：现在的问题是，当我单击按钮（添加新字段）时，第二个编辑器正常添加，但是当我尝试添加第三个字段和后续字段时，前两个字段突然合并（没有在他们之间休息）。

正如您在屏幕截图中看到的那样，在我在原始字段中添加了两个字段后，我得到了 2 个合并字段 + 中断 + 另一个合并字段 + 中断 + 和另一个字段（总共 5 个字段）。预期的行为将是总共获得 3 个字段，它们之间有中断。

如果有人能指出我做错了什么，我将不胜感激。

注意：动态添加的元素有相同的id是可以的。然后，我将在与 Python 中的列表相同的键下收集所有输入。

标签： javascript html flask ckeditor

【解决方案1】：

我似乎找到了解决方案！

显然，冲突是由于新添加的文本编辑器框具有相同的 id 而导致的，而 ckeditor 不允许这样做。所以，我唯一改变的是我现在动态更新添加的 ckeditor 框的 id。

现在一切正常！

    // add formal elements
    let i = 1;
    $(document).on('click', '#addFormalElement', function(){
        $("#newFormalElement").append('<div id="inputFormFormalElements"><textarea name="f_element[]" id="f_element[]' + i + '" class="ckeditor"></textarea><button id="removeFormalElement" type="button" class="btn btn-danger">Remove</button>');
        CKEDITOR.replace('f_element[]' + i);
        i++
    });

    // remove formal elements
    $(document).on("click", "#removeFormalElement", function(){
        $(this).closest('#inputFormFormalElements').remove();
    });

【讨论】：