Динамически дублирующий ckeditor, редактор не работает - PullRequest
Новая
       33

Динамически дублирующий ckeditor, редактор не работает

1 голос
/ 19 марта 2019

У меня есть следующая форма, где пользователи могут добавлять и удалять поля формы
(то есть тип ввода текста и текстовое поле).

Кроме того, я добавил CKEDITOR как WYSIWYG для всех текстовых полей в форме,Приведенный ниже фрагмент кода успешно генерирует новые поля, и WYSIWYG появляется во всех текстовых областях, но я не могу ввести данные во вновь созданные текстовые области.Я также проверил консоль, и нет никаких ошибок.

Что мне здесь не хватает?Я был бы очень благодарен, если бы кто-нибудь мог указать на ошибки, которые я сделал.

Посмотреть на 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 Ответ

0 голосов
/ 19 марта 2019

Я не думаю, что вы можете создать редактор, просто скопировав HTML из другого экземпляра.
Структура будет продублирована, а функция - нет.
Вам нужно будет инициализировать редактор на каждом <textarea>, который вы добавляете на страницу.

В приведенном ниже коде обратите внимание, что я удалил класс "editor" из шаблона HTML.Я сделал это, чтобы исключить текстовую область шаблона из начальной инициализации редактора.Новые редакторы будут инициированы при их добавлении на страницу.

Кроме того, поскольку вы используете jQuery, я предлагаю использовать jQuery для манипуляций с DOM.
Я добавил ckeditor jQuery адаптер скрипт. 

$(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 работать во фрагменте стека.
Я получаю ошибку о доступе к кросс-исходным фреймам:

Uncaught DOMException: заблокировал фрейм с исходным "нулевым" от доступа к фрейму перекрестного происхождения.

Итак, вот демонстрация на jsFiddle .

Для получения дополнительной информации см. это обсуждение GitHub об автоматической инициализации редакторов, которые динамически добавляются на страницу.Обсуждение включает пример кода для инициализации новых редакторов при их добавлении, а также возможность использования наблюдателей мутаций для автоматического обнаружения и инициализации новых редакторов.

...