如何在已创建的编辑器上设置数据？

Question

我想将数据设置为 3 个。已经创建的编辑器，我无法做到。

我试过了。不。 2 设置正在新创建的编辑器上发生的数据，而不是现有的。

1. 下面是我创建 3 个编辑器的位置：

create_editor: function () {
            window.editors = {};
            document.querySelectorAll('.editor').forEach((node, index) => {
                ClassicEditor
                    .create(node, {
                        //removePlugins: [ 'Heading', 'Link' ],
                        toolbar: ['bold', 'italic', 'bulletedList', 'numberedList', 'blockQuote', 'Heading'],
                        //placeholder: 'Type the content here!'
                    })
                    .then(editor => {
                        //console.log(editor);
                        window.editors[index] = editor
                    })
                    .catch(error => {
                        //console.error(error);
                    });
            });
        }

1. 下面是我尝试将我的数据设置为所有 3 个现有编辑器的位置：

set_editor: function (elem, data) {
            ClassicEditor
                .create(document.querySelector('#' + elem))
                .then(editor => {
                    editor.setData(data);
                })
        }

数据存储在本地存储中，我想检索它们并将它们设置为我已经创建的 3 个当前没有发生的编辑器。

Answer 1

您的问题是您需要获取现有 ClassicEditor 的实例才能对其进行编辑。

正如answer 中提供的那样，您可以将实例存储在全局变量中（就像您已经在做的那样，但不是索引存储 element.id 作为键）

同样来自您的 cmets，很明显您正面临编辑器创建和编辑器设置之间的竞争条件，因此不要将编辑器保存在 window.editors 保存承诺，这样您可以等待编辑器创建完成后再设置价值。

create_editor: function () {
    window.editors = {};
    document.querySelectorAll('.editor').forEach(node => {
        window.editors[node.id] =
        ClassicEditor
            .create(node, {
                //removePlugins: [ 'Heading', 'Link' ],
                toolbar: ['bold', 'italic', 'bulletedList', 'numberedList', 'blockQuote', 'Heading'],
                //placeholder: 'Type the content here!'
            })
            .then(editor => {
                //console.log(editor);
            })
            .catch(error => {
                //console.error(error);
            });
    });
}

set_editor: function (elem, data) {
    window.editors[elem].then(editor => editor.setData(data));
}