0

我使用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示例

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

4

2 回答 2

5

TL;博士

这对我有帮助：

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

直接传递给组件的模块对象使其在每次按键时呈现所有模块。为了让它停止，你必须在 react 中使用 memoization 的概念。您可以使用 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} />
于 2020-09-30T23:04:49.940 回答
0

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..."
      />
    )
....
于 2022-02-04T17:58:26.403 回答