Question

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

此外，我为表格中的所有文本区域添加了CKEDITOR作为所见即所得。下面的代码片段确实成功生成了新字段，并且所见即所得出现在所有文本区域中，但是我无法将数据输入到新生成的文本区域中。我还检查了控制台，没有任何错误。

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

$(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中删除了“ editor”类。我这样做是为了从初始编辑器初始化中排除模板的文本区域。新编辑器添加到页面后，将启动它们。

此外，由于您使用的是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，有关自动初始化动态添加到页面的编辑器。讨论内容包括用于在添加新编辑器时对其进行初始化的示例代码，以及使用突变观察器自动检测和初始化新编辑器的可能性。

动态复制ckeditor，编辑器无法运行

1 个答案: