Quill Editor, The 'on' method works only once

Question

I have the following, script for the QuillEditor(I have multiple editors):

var editors = {};
        function editors() {
     var toolbarOptions = [
                        [{'list': 'ordered'}, {'list': 'bullet'}],
                    ];
                    data.forEach(function (el) {
                        editors[el] = new Quill(el['editor'], {modules: {toolbar: toolbarOptions}, theme: 'snow', scrollingContainer:el['quill'] });
                        editors[el].on('text-change', copyText(el['text'], editors[el]));
                    });
                }
        }
                function copyText(text, editor) {
                    text.innerHTML = editor.root.innerHTML;
                    console.log(text.innerHTML)
                }

To use it in backend, I'm copying the text from the editor to a textarea copyText(el['text'].

I need to always work, but it is coping text/html, only once when the function is executed. I'm expecting editors[el].on('text-change', to work like an event listener.

The scrollingContainer, doesn't a scroll. I check that the target exist, is the parent of the editor.

Answer 1

I am not sure if this part of the error but you have an extra } after after the editors function.

The main problem here is that instead of setting the event listener you are running the event listener which is why it is running only once.

So change the event-listener line to:

editors[el].on('text-change', function () {
    copyText(el['text'], editors[el]);
});

I don't generally like creating functions in other functions and especially inside loops so I would recommend creating a function factory function that will create a new function for each element.

function createListener(text, editor) {
    return function(){
        copyText(text, editor);
    };
}

And call it like this:

editors[el].on('text-change', createListener(el['text'], editors[el]));