动态复制ckeditor，编辑器不起作用

Question

我有以下表格，用户可以在其中添加和删除表单字段 （即输入类型文本和文本区域）。

此外，我已经为表格中的所有textareas添加了CKEDITOR作为WYSIWYG。下面的代码片段确实成功生成了新的字段，WYSIWYG出现在所有textareas中，但是我无法将数据输入到新生成的textareas中。我也检查了控制台，没有任何错误。

我在这里错过了什么？如果有人能指出我所犯的错误，我将非常感激。

View on jsFiddle

$(document).ready(function() {
  var allEditors = document.querySelectorAll('.editor');
  for (var i = 0; i < allEditors.length; ++i) {
    CKEDITOR.replace(allEditors[i]);
  }
  //section add limit
  var maxGroup = 10;

  //add more section
  $(".addMore").click(function() {
    if ($('body').find('.fieldGroup').length < maxGroup) {
      var fieldHTML = '<div class="row fieldGroup">' + $(".fieldGroupCopy").html() + '</div>';
      $('body').find('.fieldGroup:last').after(fieldHTML);
    } else {
      alert('Maximum ' + maxGroup + ' sections are allowed.');
    }
  });

  //remove fields 
  $("body").on("click", ".remove", function() {
    $(this).parents(".fieldGroup").remove();
  });
});

<!-- Bootstrap css library -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Bootstrap js library -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.ckeditor.com/4.11.3/standard/ckeditor.js"></script>

<div class="container">
  <form method="post">


    <div class="row fieldGroup">
      <div class="col-md-10  ">
        <div class="form-group">
          <label for="sectionTitle">Section Title</label>
          <input type="text" name="sectionTitle" id="sectionTitle" class="form-control">
        </div>
      </div>
      <div class="col-md-2  ">
        <a href="javascript:void(0)" class="btn btn-success addMore">
          <span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span> Add
        </a>
      </div>
      <div class="col-md-12  ">
        <div class="form-group">
          <h4>Section Content</h4>
          <textarea name="sectionContent[]" class="editor"></textarea>
        </div>
      </div>
    </div>

    <div class="row fieldGroupCopy" style="display: none">
      <div class="col-md-10  ">
        <div class="form-group floating-label">
          <label for="sectionTitle">Section Title</label>
          <input type="text" name="sectionTitle" id="sectionTitle" class="form-control">

        </div>
      </div>
      <div class="col-md-2  ">
        <a href="javascript:void(0)" class="btn btn-danger remove"><span class="glyphicon glyphicon glyphicon-remove" aria-hidden="true"></span> Remove</a>
      </div>
      <div class="col-sm-12 ">
        <div class="form-group">
          <h4>Section Content</h4>
          <textarea name="sectionContent[]" class="editor"></textarea>
        </div>
      </div>
    </div>

  </form>
</div>

Answer 1

我不认为你可以通过简单地从另一个实例复制HTML来创建一个编辑器。 结构将重复，但功能不会。 您需要在添加到页面的每个<textarea>上初始化编辑器。

在下面的代码中，请注意我已从模板HTML中删除了“编辑器”类。我这样做是为了从初始编辑器初始化中排除模板的textarea。将新编辑器添加到页面后将启动它们。

此外，由于您正在使用jQuery，我建议使用jQuery进行DOM操作。 我添加了ckeditor jQuery adapter脚本。

$(function() {

  //section add limit
  var maxGroup = 10;

  // initialize all current editor(s)
  $('.editor').ckeditor();

  //add more section
  $(".addMore").click(function() {

    // define the number of existing sections
    var numGroups = $('.fieldGroup').length;

    // check whether the count is less than the maximum
    if (numGroups < maxGroup) {

      // create new section from template
      var $fieldHTML = $('<div>', {
        'class': 'row fieldGroup',
        'html': $("#fieldGroupTemplate").html()
      });

      // insert new group after last one
      $('.fieldGroup:last').after($fieldHTML);

      // initialize ckeditor on new textarea
      $fieldHTML.find('textarea').ckeditor();

    } else {
      alert('Maximum ' + maxGroup + ' sections are allowed.');
    }

  });

  //remove fields 
  $("body").on("click", ".remove", function() {
    $(this).parents(".fieldGroup").remove();
  });

});

#fieldGroupTemplate {
  display: none;
}

<!-- Bootstrap css library -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Bootstrap js library -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- ckeditor library and adapter for jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.11.3/ckeditor.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.11.3/adapters/jquery.js"></script>

<div class="container">
  <form method="post">

    <div class="row fieldGroup">
      <div class="col-md-10  ">
        <div class="form-group">
          <label for="sectionTitle">Section Title</label>
          <input type="text" name="sectionTitle" id="sectionTitle" class="form-control">
        </div>
      </div>
      <div class="col-md-2  ">
        <a href="javascript:void(0)" class="btn btn-success addMore">
          <span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span> Add
        </a>
      </div>
      <div class="col-md-12  ">
        <div class="form-group">
          <h4>Section Content</h4>
          <textarea name="sectionContent[]" class="editor"></textarea>
        </div>
      </div>
    </div>

  </form>
</div>

<div class="row" id="fieldGroupTemplate">
  <div class="col-md-10  ">
    <div class="form-group floating-label">
      <label for="sectionTitle">Section Title</label>
      <input type="text" name="sectionTitle" id="sectionTitle" class="form-control">
    </div>
  </div>
  <div class="col-md-2  ">
    <a href="javascript:void(0)" class="btn btn-danger remove"><span class="glyphicon glyphicon glyphicon-remove" aria-hidden="true"></span> Remove</a>
  </div>
  <div class="col-sm-12 ">
    <div class="form-group">
      <h4>Section Content</h4>
      <textarea name="sectionContent[]"></textarea>
    </div>
  </div>
</div>

我无法让ckeditor在堆栈代码中工作。 我收到有关访问跨源iframe的错误：

未捕获的DOMException：阻止具有原点“null”的帧访问跨源帧。

所以，这是一个demonstration on jsFiddle。

---

有关进一步的兴趣，请参阅this GitHub discussion关于自动初始化动态添加到页面的编辑器。讨论内容包括用于在添加新编辑器时初始化新编辑器的示例代码，以及使用变异观察器自动检测和初始化新编辑器的可能性。