Dynamically duplicating ckeditor, editor doesn't function

问题: I have the following following form where users can add and delete form fields (i.e. Input type text and textarea). Further, I've added CKEDITOR as WYSIWYG for all textar...

问题:

I have the following following form where users can add and delete form fields
(i.e. Input type text and textarea).

Further, I've added CKEDITOR as WYSIWYG for all textareas in the form. The below code snippet does generate the new fields successfully and WYSIWYG appears in all the textareas, but I cant input data into the newly generated textareas. I've also checked console and there are no any errors.

What am I missing here? I would be very thankful if anyone could point out the errors I've made.

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>


回答1:

I don't think you can create an editor by simply copying the HTML from another instance.
The structure will be duplicated, but the functionality will not.
You'll need to initialize the editor on each <textarea> you add to the page.

In the code below, notice that I've removed the "editor" class from the template HTML. I did that to exclude the template's textarea from the initial editor initialization. New editors will be initiated when they are added to the page.

Also, since you're using jQuery, I suggest using jQuery all the way through for DOM manipulation.
I've added the ckeditor jQuery adapter script.

$(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>

I had trouble getting ckeditor to work in a stack snippet.
I get an error about accessing cross-origin iframes:

Uncaught DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame.

So, here's a demonstration on jsFiddle.


For further interest, see this GitHub discussion about automatically initializing editors that are dynamically added to the page. The discussion includes sample code for initializing new editors when they are added, as well as the possibility of using mutation observers to automatically detect and intialize new editors.

  • 发表于 2019-03-23 19:20
  • 阅读 ( 243 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除