如何给所有带editor类的textarea应用CKEditor？仅首个生效怎么解决

问题原因 #

• document.querySelector('.editor') 仅会返回页面中第一个匹配.editor类的DOM元素，所以只有第一个textarea成功加载了编辑器
• 要给所有同类名的textarea批量加载编辑器，需要先获取全部匹配元素再逐个初始化

修正后的脚本代码 #

<script src="assets/js/ckeditor.js"></script>
<script>
// 获取所有带editor类的文本框元素
const editorElements = document.querySelectorAll('.editor');
// 遍历逐个初始化CKEditor
editorElements.forEach(el => {
    ClassicEditor
        .create(el, {
            // 此处可保留原有的工具栏等自定义配置
            // toolbar: [ 'heading', '|', 'bold', 'italic', 'link' ]
        })
        .catch(err => {
            console.error(err.stack);
        });
});
</script>

如果后续需要调用指定的编辑器实例，可以将实例按元素的id存储到全局对象中，无需额外调用的话以上代码直接替换原有脚本即可正常使用。

内容的提问来源于stack exchange，提问作者Esraa Alsharit