React quill 自定义图像处理程序模块导致编辑器出现键入问题

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，编辑器可以完美运行。这是代码sanbox示例

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

Answer 1

TL;博士

这就是帮助我的原因：

https://github.com/zenoamaro/react-quill/issues/309#issuecomment-654768941 https://github.com/zenoamaro/react-quill/issues/309#issuecomment-659566810

---

直接传递到组件中的模块对象使其在每次按键时呈现所有模块。要让它停止，你必须在反应中使用记忆的概念。您可以使用 useMemo 挂钩包装模块，然后将其传递到组件中。

const modules = useMemo(() => ({
toolbar: {
container: [
[{ header: [1, 2, false] }],
['bold', 'italic', 'underline'],
[{ list: 'ordered' }, { list: 'bullet' }],
['image', 'code-block']
],
handlers: {
image: selectLocalImage
}
}
}), [])

然后在组件中：

<ReactQuill placeholder="Write some text..."
value={text}
modules={modules}
onChange={onChange} />

Answer 2

useRef() & onBlur()是你问题的最终答案。

这是我解决相同查询的方法。

export default function QuillEditor({
value,
onChange
}) {

const [description, setDescription] = useState(value || "");
useEffect(() => {
if (value) {
setDescription(value);
}
}, [value]);
....
const quillRef = useRef(); // the solution
....
const imageHandler = () => {
// get editor
const editor = quillRef.current.getEditor();
const input = document.createElement("input");
input.setAttribute("type", "file");
input.setAttribute("accept", "image/*");
input.click();
input.onchange = async () => {
const file = input.files[0];
try {
const link = IMAGE_LINK_HERE;
editor.insertEmbed(editor.getSelection(), "image", link);
} catch (err) {
console.log("upload err:", err);
}
};
};

const toolbarOptions = [
["bold", "italic", "underline", "strike"],
["code-block", "link", "image"],
...
];
const modules = {
toolbar: {
container: toolbarOptions,
handlers: {
image: imageHandler,
},
},
clipboard: {
matchVisual: false,
},
};
const handleOnBlur = () => {
onChange(description);
};
....

return (
<ReactQuill
ref={quillRef} // must pass ref here
value={description}
onChange={(val) => setDescription(val)}
onBlur={handleOnBlur}
theme="snow"
modules={modules}
formats={formats}
placeholder="Write something awesome..."
/>
)
....