如何通过onclick点击事件在div中追加加载功能完整的CKEditor富文本编辑器

• 页面初始加载时你已经调用了CKEDITOR.replace( 'editor2' )，但此时id/name为editor2的textarea还没有被插入到DOM中，初始化命令直接失效
• 点击按钮插入textarea后，没有再次调用CKEditor的初始化方法，所以只会渲染普通文本框
• 没有给动态生成的textarea设置唯一标识，多次点击添加按钮会出现name重复的冲突
• codeEditorCount变量没有设置初始值，计数逻辑失效

<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8">
      <title>CKEditor</title>
      <script src="https://cdn.ckeditor.com/4.16.2/standard/ckeditor.js"></script>
  </head>
  <body>
   <h3>Document Load (Working)</h3>
   <textarea name="editor1"></textarea>
   <script>
           CKEDITOR.replace( 'editor1' );
   </script>            
   <h3>When Append (Fixed)</h3>
   <button onclick="addCodeEditor('Editor')" class="btn btn-primary">Editor</button>   
   <div id="additionalElement"></div>
 </body>
 <script>
 var codeEditorCount = 1; // 初始化编辑器计数
 function addCodeEditor(Editor){
    var div = document.getElementById('additionalElement');
    let editorName = `dynamic_editor_${codeEditorCount}`; // 生成唯一编辑器标识
    div.innerHTML += `<textarea name="${editorName}"></textarea>`;
    // 文本框插入DOM后立刻初始化CKEditor
    CKEDITOR.replace(editorName);
    codeEditorCount++;
 }
 </script>
</html>

• 给计数变量设置初始值，每次新增编辑器都会生成唯一的name属性，避免冲突
• 把CKEditor初始化逻辑放到textarea插入DOM的逻辑之后，确保初始化时目标元素已经存在
• 删除了页面加载阶段无效的editor2初始化代码

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