使用onclick事件在div标签中附加CKEditor？答案

【问题标题】：Append CKEditor in div tag using onclick event?使用onclick事件在div标签中附加CKEditor？
【发布时间】：2021-09-02 18:13:53
【问题描述】：

我正在创建一个博客网站，我想将这个（CKEditor）或任何文本编辑器（WYSIWYG）添加到我的表单标签中。我在所有知名平台上搜索了很多。但我没有找到答案。我使用的方法是编写脚本。当我单击时，我在脚本的引用中输入了 textarea 标记代码，但简单的 textarea 标记被添加到我的代码中。但是编辑器脚本没有加载。如何在点击事件上加载功能齐全的编辑器？

<!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 (not working)</h3>
   <button onclick="addCodeEditor('Editor')" class="btn btn-primary">Editor</button>   
   <div id="additionalElement"></div>
   <script>
            CKEDITOR.replace( 'editor2' );
   </script>
 </body>
</html>

   <script>
 var codeEditorCount;
 function addCodeEditor(Editor){
    var div = document.getElementById('additionalElement');
    div.innerHTML += '<textarea name="editor2"></textarea>';
    codeEditorCount++;
 }
   </script>

【问题讨论】：

标签： javascript html jquery ckeditor

【解决方案1】：

这确实有效。我为你做了一个小提琴：https://jsfiddle.net/bogatyr77/cbuzmfpL/2/
我不知道为什么它在代码示例中显示错误，但小提琴有效。

document.getElementById('editor1').style.display = 'none';

function myFunction() {
  CKEDITOR.replace('editor1');
}

<script src="https://cdn.ckeditor.com/4.16.2/standard/ckeditor.js"></script>
<button type="text" onClick="myFunction()">
Click me
</button>
<textarea name="editor1" id="editor1" rows="10" cols="80">
                This is my textarea to be replaced with CKEditor 4.
</textarea>

【讨论】：

以及如何更换所见即所得的编辑器。如果你知道这里提到的脚本
更新了我的小提琴。现在您在开始时加载了一个 editor1，如果您单击该按钮，编辑器将被 editor2 替换。看到那个小提琴：jsfiddle.net/bogatyr77/cbuzmfpL/4
谢谢你，伯恩哈德。你能告诉我如何更换所见即所得吗？ CKeditor.replace 是 CKEditor 的命令。哪个命令用于所见即所得？
做了一个新的小提琴。现在您可以通过单击按钮更改 Textarea WISIWIG。见：jsfiddle.net/bogatyr77/xfwgaL60/3