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

Question

我正在创建一个博客网站，我想将这个 (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>

Answer 1

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

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>

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

Append CKEditor in div tag using onclick event?

javascript

html

jquery

ckeditor