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

Question

I want to set data to 3 nos. of already created editors which I am unable to do.

I tried pt. no. 2 to set data which is happening on a newly created editor and not to the existing one.

1. Below is where i am creating my 3 editors:

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

2. Below is where i am trying to set my data to all my 3 existing editors:

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

The data are stored in a local storage and I want to retrieve them and set them to my already 3 created editors which currently is not happening.

Answer 1

Your problem here is that you need to get an instance of existing ClassicEditor to edit it.

As provided in this answer , you can store your instances in a global variable (like you are already doing, but instead of index store element.id as key)

Also from your comments, it is clear that you are facing race condition between editor create and editor set, so instead of saving the editor in window.editors save the promise, that way you can wait for editor create to finish before setting the value.

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