CKEditor 5 的多个文本区域
Multiple textareas with 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>
结果如下:
为什么只有第一个?
document.querySelector() returns the first matched element. You need 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>
我更喜欢使用 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);
});
});
这个解决方案对我有用
<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>
我尝试将 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>
结果如下:
为什么只有第一个?
document.querySelector() returns the first matched element. You need 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>
我更喜欢使用 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);
});
});
这个解决方案对我有用
<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>