Ckeditor 5 多个实例

Question

我想动态初始化 ckeditors，然后为每个编辑器使用setData()函数。我试过这个：CKEditor 5 – 获取编辑器实例，但我收到错误：

无法读取未定义的属性"setData">

const editors = {}; 
function createEditor( elementId ) {
return ClassicEditor
.create( document.getElementById( elementId ) )
.then( editor => {
editors[ elementId ] = editor;
} )
.catch( err => console.error( err.stack ) );
}
$(document).ready( function() {
createEditor( 'editor1' );
createEditor( 'director1' );
console.log(editors.editor1.setData('test')); //error message
});

是否可以做我想做的事，如果是，我该怎么办？

Answer 1

請參閱：https://ckeditor.com/docs/ckeditor5/latest/api/module_core_editor_editor-Editor.html#event-ready。

您只能在编辑器数据满载时设置它。虽然有一个ready事件，正如您可以在链接中读到的那样，一个更好的地方是create方法返回的承诺。您的代码可能如下所示：

var editors = [];   
function createEditor( elementId, data ) {
return ClassicEditor
.create( document.querySelector( '#' + elementId ) )
.then( editor => {
editors[ elementId ] = editor;
editor.setData( data ); // You should set editor data here
} )
.catch( err => console.error( err ) );
}
$(document).ready( function() {
createEditor( 'editor', 'test' );
createEditor( 'director1', 'test' );
});

Answer 2

你可以为每个文本区域设置class，例如ckeditor。

<textarea class="ckeditor"></textarea>

接下来在脚本部分按类选择所有元素 ckeditor 和 init 编辑器为每个人

<script>
const editors = document.querySelectorAll('.ckeditor');
editors.forEach((el) => {
ClassicEditor
.create(el)
.catch( error => {
console.error( error );
} );
});
</script>