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，编辑器就可以完美工作。这是codesanbox 示例

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

Answer 1

长话短说

这对我有帮助：

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