多个带有CKEditor 5的文本框

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>

这是结果：

为什么只有第一个？

- Pavel Prokofiev

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>

- Wizard

---

但是如果我不知道编辑器的数量呢？我想在我的网站上使用一个脚本来处理所有元素'.editor'。 - Pavel Prokofiev

但这正是我向您展示的内容。document.querySelectorAll('.editor')获取所有具有editor类的元素，然后我们循环遍历它们，为每个元素创建一个CKEditor实例。 - Wizard

如果他们选择不与jQuery集成，那么他们真的应该有一种内置的方法来做到这一点。这只是我的个人意见。谢谢！ - Alex

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);
        });
});

- Rifki Ardiansyah

Answer 3

这个解决方案对我有效

<script>
    CKEDITOR.on('instanceReady', function(event) {
        var editor = event.editor;
        editor.on('change', function(event) {
            // Sync textarea
            this.updateElement();
            for (var i in CKEDITOR.instances) {
            CKEDITOR.instances['ckeditor' + i].on('change', function() 
            { CKEDITOR.instances['ckeditor' + i].updateElement() });
            }
        });
    });
</script>

- Nawaz Sayyad