Quill Editor，'on' 方法只工作一次 [英] Quill Editor, The 'on' method works only once

问题描述

我有以下 QuillEditor 脚本(我有多个编辑器):

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

为了在后端使用它，我将文本从编辑器复制到文本区域 copyText(el['text'].

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

我需要一直工作，但它正在处理 text/html，只有在函数执行时一次.我期待 editors[el].on('text-change', 像事件监听器一样工作.

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.

scrollingContainer，不是滚动.我检查目标是否存在，是编辑器的父级.

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

推荐答案

我不确定这部分是否有错误，但您在 editors 之后有一个额外的 }> 功能.

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

然后这样称呼它:

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

这篇关于Quill Editor，'on' 方法只工作一次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！