我使用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
,编辑器就可以完美地工作。
我是否正确地编写了自定义模块?
2条答案
按热度按时间yxyvkwin1#
TL;DR
这是帮助我的:
https://github.com/zenoamaro/react-quill/issues/309#issuecomment-654768941https://github.com/zenoamaro/react-quill/issues/309#issuecomment-659566810
直接传入组件的modules对象使其在每次按键时呈现所有模块。要使其停止,您必须在react中使用memoization的概念。您可以使用useMemo钩子来 Package 模块,然后将其传入组件。
然后在组件中:
mzaanser2#
useRef() & onBlur()
是您问题的最终答案。下面是我如何解决相同的查询。