如何在ckeditor插件同步中读取JSON文件

Question

我需要为 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 放在 then 子句中，因为 init 方法将在它之前完成。

那么，如何强制 fetch 等待结果，或者更好地说如何同步而不是异步获取数据？

Answer 1

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

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
        });
      })();