How to set data on an already created editor?

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.

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

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.

AvcS · Answer 1 · 2019-10-25T08:31:05.547

0

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

edited Oct 25 '19 at 08:31

answered Oct 23 '19 at 09:58

AvcS

2,263
11
18

I will try that and let you know. – amitava deb Oct 23 '19 at 10:01
hi Avcs, I tried and your code worked same to mine. Your code created another editor and the data was shown there. I want to show the data to my existing editor. how is this possible? – amitava deb Oct 23 '19 at 10:18
https://stackoverflow.com/questions/48575534/ckeditor-5-get-editor-instances/48682501#48682501 please follow this answer, it provides a way to store instances and fetch, based on element id – AvcS Oct 23 '19 at 10:53
hey Avcs, thanks for the link. i was able to set the data now but i am able to do it for the last editor and not for all the other 2 before it. can you help? also, i tried your edited code and i am getting "window.editors[elem] is undefined", though console.log(window.editors) return the correct objects of 3 editors. – amitava deb Oct 23 '19 at 11:56
Maybe you are facing a race condition? Create method is asynchronous – AvcS Oct 23 '19 at 12:10
i am totally clueless now buddy. – amitava deb Oct 23 '19 at 12:35
Ok race condition means, you start an asynchronous event and try to access the result before the completion of the asynchronous event – AvcS Oct 23 '19 at 12:37
Ok but in my case my both the functions are independent to each other. I dont see a reason why i have to use async. Plz correct me if im wrong. – amitava deb Oct 23 '19 at 17:42

How to set data on an already created editor?

1 Answers1