web-dev-qa-db-ja.com

CKEditor 5での複数のテキストエリア

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>

そしてここに結果があります: enter image description here

なぜ最初だけ?

9
Pavel Prokofiev

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