使用CKEditor 5的多个textareas

Question

我尝试将CKEditor 5设置为多个<textarea>，但只有第一个有效。

以下是代码：

<script src="https://cdn.ckeditor.com/ckeditor5/1.0.0-alpha.2/classic/ckeditor.js"></script>
<textarea name="content0" class="editor" id="c0">This is some sample content.</textarea>
<textarea name="content1" class="editor" id="c1">This is some sample content.</textarea>
<textarea name="content2" class="editor" id="c2">This is some sample content.</textarea>
<script>ClassicEditor.create(document.querySelector('.editor'));</script>

结果如下：

为什么只有第一个？

Answer 1

document.querySelector()返回第一个匹配的元素。您需要document.querySelectorAll()

<script src="https://cdn.ckeditor.com/ckeditor5/1.0.0-alpha.2/classic/ckeditor.js"></script>
<textarea name="content0" class="editor" id="c0">This is some sample content.</textarea>
<textarea name="content1" class="editor" id="c1">This is some sample content.</textarea>
<textarea name="content2" class="editor" id="c2">This is some sample content.</textarea>
<script>
var allEditors = document.querySelectorAll('.editor');
for (var i = 0; i < allEditors.length; ++i) {
  ClassicEditor.create(allEditors[i]);
}
</script>

Answer 2

我更喜欢使用 foreach 而不是像@Wizard 的回答那样的 for 循环

document.querySelectorAll('[data-init-plugin="ckeditor"]').forEach(function (val) {
    ClassicEditor
        .create(val, {
            toolbar: ['bold', 'italic', 'link', 'bulletedList', 'numberedList'],
        })
        .catch(error => {
            console.log(error);
        });
});