Как я могу установить несколько ckeditor одного и того же класса, даже если мы добавим новый ckeditor, добавив по нажатию кнопку? - PullRequest
Новая
       44

Как я могу установить несколько ckeditor одного и того же класса, даже если мы добавим новый ckeditor, добавив по нажатию кнопку?

0 голосов
/ 26 декабря 2018

Я планирую использовать несколько ckeditor на одной странице.Мне нужно добавить ckeditor при нажатии кнопки, но он не работает на добавленном ckeditor.Я попытался вставить один и тот же класс и вызвать все ckeditors, такие как «querySelectorAll ('. Editor')» *

Он работает правильно на каждом классе «.editor».Но моя проблема в том, что ckeditor добавляется после нажатия кнопки.

Я обнаружил, что класс '.editor' добавлен путем проверки исходного кода.Я думаю, что это будет работать, теперь мне нужна помощь. 

    <div class="editors">
        <div class="editor">
          <p>Editor 1 here</p>
        </div>
        <div class="editor">
          <p>Editor 2 here</p>
        </div>
        </div>

        <button class="add-editor">Add New Editor</button>


        <script>
        $('.add-editor').click(function(){
         $('.editors').append(' <div class="editor"><p>Editor 3 here (Editor Not Loading here)</p></div>')
         });

 var allEditors = document.querySelectorAll('.editor');
  for (var i = 0; i < allEditors.length; ++i) {
    InlineEditor.create(allEditors[i]);
  }

        </script>

Ответы [ 2 ]

0 голосов
/ 26 декабря 2018

Хитрость в том, что вы хотите включить CKEditor только для новых редакторов.Если вы сделаете это с существующими, вы получите ошибки.Вы можете решить эту проблему, добавив к ним класс .enabled, и, таким образом, при добавлении нового класса вы не затронете старые. 

// Once on page load, for existing editors
$(document).ready(enableEditors);
// When you click on the button
$('.add-editor').click(function() {
  var count = $('.editor').length + 1;
  $('.editors').append('<div class="editor"><p>Editor ' + count  + ' here</p></div>');
  enableEditors();
});

function enableEditors() {
  $('.editor:not(.enabled)').ckeditor().addClass('.enabled');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.ckeditor.com/4.11.1/standard/ckeditor.js"></script>
<script src="https://cdn.ckeditor.com/4.11.1/standard/adapters/jquery.js"></script>

<div class="editors">
  <div class="editor">
    <p>Editor 1 here</p>
  </div>
  <div class="editor">
    <p>Editor 2 here</p>
  </div>
</div>

<button class="add-editor">Add New Editor</button>
0 голосов
/ 26 декабря 2018

Вам нужно позвонить CKEDITOR.replace('editor'); после создания динамического контента, чтобы настроить CKEDITOR на нем.

Дайте мне знать, если это не то, на что вы надеялись.

NB Не уверен, почему выдает ошибку, несмотря на работу.Если кто-нибудь знает, пожалуйста, дайте мне знать, и я обновлю ответ.

Демо 

// Create click event for add button
$("#add-input").click(function() {

  // Add new input to #input-list
  $("#input-list").append('<input name="editor">');

  // Replace newly added editor with CKEDITOR
  CKEDITOR.replace('editor');

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdn.ckeditor.com/4.11.1/standard/ckeditor.js"></script>


<button id="add-input">Add editor</button>

<div id="input-list"></div>
...