Question

我正在尝试创建一个动态表单，您可以在其中添加新的“章节”，点击最多10个按钮。这将是“简单的”，但我也希望文本字段实现CKEditor，我无法使它工作。我得到了顺利添加章节，我只能编辑它们的最后一个实例。此外，如果我编辑最后一个并点击“添加新章节”，最后一个会被删除。我的尝试基于this thread。

到目前为止我得到的Javascript代码：

num_chapter = 1;
var editor = new Array();

function createEditor()
  {
  if (num_chapter <= 10)
    {
    var num=num_chapter+1;
    document.getElementById('editor').innerHTML += "<br><br><h3 style='display:inline'>Chapter " + num + ": </h3><input style='display:inline' type='text' name='titlechapter_" + num + "' placeholder='Title for chapter " + num + "'><br><br>";    

    // Create a new editor inside the <div id="editor">, setting its value to html
    var config = {};
    editor[num_chapter] = CKEDITOR.appendTo( 'editor' , config, '' );
    }
  else
    {
    document.getElementById('chapters').innerHTML += "<br />Maximum is 10 chapters.";
    }
  num_chapter += 1;
  }

HTML code：

<h3 style='display:inline'>Chapter 1: </h3> <input style='display:inline' type="text" name="titlechapter_1" placeholder="Title chapter 1"><br><br>
<textarea class="ckeditor" onChange="editing('Chapter 1');" name="chapter_1"></textarea>
  <div id="editor">
  </div><br>
  <input type="button" onclick="createEditor(); editing('Chapter 1');" value=" Add chapter ">

正如您所看到的，我尝试将编辑器对象放入一个数组中，但它没有成功。我不太了解Javascript（更不用说几乎没有了），所以任何帮助都将不胜感激！

Answer 1

我终于解决了这个问题，共计3到4个小时。它比我想象的要容易，但不是那么优雅。这可以通过php和javascript来实现，使它“稍微”更优雅，但是如果您的文本字段很少，那么只需简单的旧HTML和Javascript就可以了。

首先，HTML / PHP：

<h3 style='display:inline'>Chapter 1: </h3> 
  <input style='display:inline' type="text" name="titlechapter_1" placeholder="Title chapter 1"><br><br>
  <textarea class="ckeditor" onChange="editing('Chapter 1');" name="chapter_1"></textarea>
  <?php for ($i=2; $i<=10; $i++)
    echo "<div id='div_editor_".$i."' style='display:none;'><textarea id='editor_".$i."' name='editor".$i."'></textarea></div>"; ?>
  <br><br>
  <input type="button" onclick="createEditor();" value=" Add chapter ">
<br><br>

意识到它会创建所有div，但由于它们中没有任何内容，因此它们不会出现。然后，Javascript：

num_chapter = 2;
var editor = new Array();

function createEditor()
  {
  if (num_chapter <= 10)
    {
    toggle_visibility('div_editor_' + num_chapter );

    document.getElementById('div_editor_' + num_chapter).insertAdjacentHTML( "afterbegin", "<br><br><h3 style='display:inline'>Chapter " + num_chapter + ": </h3><input style='display:inline' type='text' name='titlechapter_" + num_chapter + "' placeholder='Title for chapter " + num_chapter + "'><br><br>");

    // Create a new editor inside the <div id="editor">, setting its value to html
    CKEDITOR.replace( 'editor_' + num_chapter );

    num_chapter += 1;
    }
  else
    {
    alert("Sorry, maximum is 10 chapters.");
    }
  }

此代码将与CKeditor正确合作生成10章。如果尝试创建第11个，则会显示弹出窗口中的警告。重要的是，此行for ($i=1; $i<10; $i++)，此num_chapter < 10和此num_chapter == 10具有相同的值（在我的情况下为10）。

Answer 2

经过一些反复试验，我终于找到了解决这个问题的方法。

这是为了回答可能会像我一样落在这里的搜索，寻找“如何动态创建ckeditor实例”。

除了ckeditor.js库之外，诀窍是在html脚本中包含CKEDITOR中包含的适配器库

ckeditor/adapters/jquery.js

并在javascript中初始化这些元素

 var elem = $(this).find('.your_selector')
 elem.ckeditor()

（确保.your_selector是将转换为ckeditor实例的textarea的类）

希望这可以帮助那些仍然可以找到这个帖子的人。

Answer 3

在元素上动态添加 CKEditor 4 ，以创建CKEditor的多个实例

JavaScript

function createNewEditor(targetElement) {
  var element = document.createElement("textarea");
  $(element)
    .addClass(".ckeditor")
    .appendTo(targetElement);
  return CKEDITOR.replace(element);
}

$(document).ready(function() {
  $(".ckeditor").each(function(_, ckeditor) {
    CKEDITOR.replace(ckeditor);
  });

  $(".chapter-video").each(function(_, chapterVideo) {
    var chapterVideoInput = $(chapterVideo).find(".file-input");
    var chapterFileUploadName = $(chapterVideo).find(".upload-file-name");
    $(chapterVideoInput).on("change", function(e) {
      var filesLength = e.target.files.length;
      if (filesLength) {
        $(chapterFileUploadName)
          .find("span")
          .text(e.target.files[0].name);
      }
    });
  });
  $(".add-chapter-para").each(function(_, addParaBtn) {
    var addTo = $(addParaBtn).data("add-to");
    $(addParaBtn).on("click", function() {
      createNewEditor(addTo);
    });
  });
});

HTML

<div class="container">
  <form action="#">
    <div class="" id="main-container">
      <div class="editor">
        <textarea class="ckeditor" name="chapterContent[]"></textarea>
      </div>
    </div>
    <div class="my-2">
      <button class="btn btn-primary">Submit</button>
    </div>
  </form>
</div>

<hr />
<button
  class="btn btn-danger add-chapter-para"
  data-add-to="#main-container"
  type="button"
>
  Add Paragraph
</button>

按钮元素具有一个data-attribute，我们要在其中添加ckeditor。

Working Codepen Link

使用CKEditor动态添加textareas

3 个答案: