我如何创建多个具有 class 名称的编辑器

Question

我尝试创建多个 ckeditors 经典。问题是我不知道我会有多少。所以我通过类名初始化它们。这会启动编辑器并开始工作，但不要通过 ajax 发送任何内容。因此，当我尝试更新文本区域时，我只能发送最后一个编辑器，因为 window.editor 被覆盖了。然后我尝试存储在一个数组中，但我不能传递 th for neditor 值，因为它是一个 then 所以它在 for 循环完成时执行，所以 neditor 总是 2。我怎样才能让它发挥作用？我不太理解承诺谢谢！

import ClassicEditor from './ckeditor5-build-classic';

var allEditors = document.querySelectorAll('.usarCkeditor');//i have 2 editors in that case
for (var neditores = 0; neditores < allEditors.length; neditores++) {
    ClassicEditor.create(allEditors[neditores])
        .then(editor => {
            window.editor = editor;//window.editor is alway the last editor
        })
        .catch(err => {
            console.error(err.stack);
        });
}

这是其他版本：

for (var neditores = 0; neditores < allEditors.length; neditores++) {
    window["editor" + neditores] = 'paco';
    ClassicEditor.create(document.querySelector('#' + allEditors[neditores].attributes.id.value))
        .then(editor => {
            console.log(editor);
            window["editor" + neditores] = editor;
            console.log(neditores);//always 2 so it overwrites the array

        })
        .catch(err => {
            console.error(err.stack);
        });
}

//window.editor -> [0] = 'paco';[1] = 'paco';[2]= ckeditor

Answer 1

请注意querySelectorAll returns an HTMLNodeList不是数组。

如果你想用类初始化多个元素的编辑器，你可以用这种方式来做。所有对编辑器实例的引用都将存储在 window.editors 对象中。

window.editors = {};

document.querySelectorAll( '.editor' ).forEach( ( node, index ) => {
    ClassicEditor
        .create( node, {} )
        .then( newEditor => {
            window.editors[ index ] = newEditor 
        } );
} );

这是一个工作示例：https://codepen.io/msamsel/pen/pXONjB?editors=1010

我如何创建多个具有 class 名称的编辑器

How can i create multiple editors whit class name

ckeditor5