即使我们通过单击按钮添加新的 ckeditor，我如何设置相同 class 的多个 ckeditor？

Question

我打算在一个页面上使用多个 ckeditor。我需要在单击按钮时附加 ckeditor，但它不适用于附加的 ckeditor。我试图插入相同的 class 并调用所有 ckeditors，如 "querySelectorAll('.editor')"

它在每个“.editor”class 上都能正常工作。但我的问题是单击按钮后附加的 ckeditor。

我发现“.editor”class 已通过检查源代码添加。我认为它会起作用，现在我需要帮助。

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

Answer 1

您需要在创建动态内容后调用 CKEDITOR.replace('editor'); 以在其上设置 CKEDITOR。

如果这不是您所希望的，请告诉我。

N.B. Not sure why it's throwing an error, despite working. If anyone knows please let me know and I'll update the answer.

演示

// 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>

Answer 2

这里的技巧是您只想为新编辑器启用 CKEditor。如果你对现有的这样做，你会得到错误。你可以通过给它们添加一个 .enabled class 来解决这个问题，这样，当你添加一个新的时，你不会影响旧的。

// 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>

即使我们通过单击按钮添加新的 ckeditor，我如何设置相同 class 的多个 ckeditor？

How can I set multiple ckeditors of same class even if we add new ckeditor by appending on click a button?

javascript

jquery

multiple-instances

ckeditor

演示