反应羽毛笔自定义图像处理程序模块，导致编辑器出现键入问题

Question

我正在使用React Quill作为文本编辑器。在添加自定义图像处理程序之前，此方法工作正常。如果按如下所示添加图像处理程序，则无法在编辑器中键入内容。键入会失去对每个按键的关注。

const modules = {
    toolbar: {
        container: [
            [{'header': [3, 4, 5, 6, false]}],
            ['bold', 'italic', 'underline', 'strike', 'blockquote', 'code'],
            [{color: []}, {background: []}],
            [{'list': 'ordered'}, {'list': 'bullet'}, {'indent': '-1'}, {'indent': '+1'}],
            ['link', 'image'],
            ['clean']
        ],
        handlers: {
            image: imageHandler
        }
    },
    clipboard: {
        // toggle to add extra line breaks when pasting HTML:
        matchVisual: false,
    }
};

function imageHandler() {
    console.log("custom image handler");
}

如果我注释掉image: imageHandler，则编辑器可以完美运行。这是codesanbox example

我是否正确编写了自定义模块？

Answer 1

我有一个类似的问题，我使用下面的链接解决了。如您的帖子评论中所述，反应羽毛笔的维护水平不会激发信心。但是就我个人而言，我将选择坚持下去。

https://github.com/quilljs/quill/issues/1940#issuecomment-379536850

总结一下，因为模块在更改时被传递到组件内部的FC，它将重新呈现，这意味着如果您声明模块也将重新呈现，这就是其失去重点的原因。解决方案是与Quill组件分开定义模块和图像处理程序，例如它上面。这提出了能够更新您的内容的新问题。因此，我没有在组件上方定义它，而是制作了一个新组件来纯粹包装Quill组件，并通过props传递了模块/ onchange fn / value。

希望有帮助，如有必要，我可以制作一个新的代码笔进行演示。