如何在CKEditor插件同步中读取json文件



我需要为CKEditor 5创建一个自定义插件,该插件将读取JSON并在工具栏的下拉列表中显示数据。我面临的问题是异步获取数据,在Init方法中将列表设置到配置中之前还没有完成。

export default class PlaceholderEditing extends Plugin {
static get requires() {
return [Widget];
}
init() {

this._defineSchema();
this._defineConverters();
this.editor.commands.add('placeholder', new PlaceholderCommand(this.editor));
this.editor.editing.mapper.on(
'viewToModelPosition',
viewToModelPositionOutsideModelElement(this.editor.model, viewElement => viewElement.hasClass('placeholder'))
);
var items=new Array();
fetch('/GetTerms').then(response => {
if (!response.ok) {
throw new Error("HTTP error " + response.status);       
}
return response.json();
}).then(data => {
items = data;
});

this.editor.config.define('placeholderConfig', {
types: items
});

}

在这段代码中,items总是为null,因为config define是在提取完成之前运行的。我不能把config.define放在then子句中,因为init方法会在它之前完成

那么,我如何才能强制获取等待结果,或者更好地说,我如何获取数据同步而非异步?

最后,我通过在构造函数中添加异步函数来解决问题

init() {
return (async () => {
this._defineSchema();
this._defineConverters();
this.editor.commands.add('placeholder', new PlaceholderCommand(this.editor));
this.editor.editing.mapper.on(
'viewToModelPosition',
viewToModelPositionOutsideModelElement(this.editor.model, viewElement => viewElement.hasClass('placeholder'))
);
var items = new Array();
await fetch('contractTerms.json').then(response => {
if (!response.ok) {
throw new Error("HTTP error " + response.status);
}
return response.json();
}).then(data => {
console.log(data.items);
items = data.items;
});
console.log('pass');
this.editor.config.define('placeholderConfig', {
types: items
});
})();

最新更新