CKEditor 5 的多个文本区域

Posted

技术标签:

【中文标题】CKEditor 5 的多个文本区域【英文标题】:Multiple textareas with CKEditor 5 【发布时间】:2018-06-16 20:32:01 【问题描述】:

我尝试将 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>

结果如下:

为什么只有第一个?

【问题讨论】:

【参考方案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>

【讨论】:

但如果我不知道有多少编辑?我想在我的站点上为所有元素“.editor”使用一个脚本 但这正是我向您展示的。 document.querySelectorAll('.editor') 获取所有具有 editor 类的元素,然后我们遍历它们,为每个元素创建一个 CKEditor 实例。 如果他们选择不与 jquery 集成,他们真的应该有一个内置的方法来做到这一点。只是我的 2 美分。谢谢!【参考方案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);
        );
);

【讨论】:

【参考方案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>

【讨论】:

以上是关于CKEditor 5 的多个文本区域的主要内容,如果未能解决你的问题,请参考以下文章

文本区域消失 - Ckeditor

ckeditor 更新文本区域

CKEditor 5 的设定值

javascript onkeypress错误直播预览文本CKEditor没有文本区域

VueJs:文本区域输入绑定

在jquery中添加多个CKEditor实例