React Quill 富文本编辑器中图片上传服务端

在 Antd Pro 中使用 React Quill 富文本编辑器，上传图片默认会转换成 Base64，然后上传服务器，保存到数据库中。 但是如果图片过大，就非常不适合在数据库中存储，同时也会占用服务器的带宽。

需要改造成 React Quill 上传图片到服务器，然后转发到七牛云 CDN，将链接返回前端。

工具栏显示上传图片

如何自定义 React Quill 的工具栏功能列表？

const toolbarContainer = [
        ['bold', 'italic', 'underline', ],        
        [{ 'color': [] }, { 'background': [] }],
        [{ 'align': [] }],
        [{ 'indent': '-1' }, { 'indent': '+1' }],          
        [{ 'script': 'sub' }, { 'script': 'super' }],      
        ['blockquote', ],

        [{ 'list': 'ordered' }, { 'list': 'bullet' }],
        ['image', ],
        ['clean'],
    ];

Function Component 如何添加 handler 函数

const someHandler = () => {
    // do something
};

Function Component 如何使用 ref

https://reactjs.org/docs/refs-and-the-dom.html

function CustomTextInput(props) {
  // textInput must be declared here so the ref can refer to it
  const textInput = useRef(null);
  
  function handleClick() {
    textInput.current.focus();
  }

  return (
    <div>
      <input
        type="text"
        ref={textInput} />
      <input
        type="button"
        value="Focus the text input"
        onClick={handleClick}
      />
    </div>
  );
}

umi request post formdata

https://github.com/umijs/umi-request/issues/168

Content-Disposition: form-data; name="image"; filename="-e-预报预警@2x.png"
Content-Type: image/png

加上 imageHandler 之后，输入卡顿

一次只能输入一个字符。

类似问题：

https://github.com/quilljs/quill/issues/2034

hey @seongbin9786 @james-brndwgn, adding custom image handler causing issues with editor typing. Editor can only type one character and then lose focus. Issue only comes up when editor is exported as functional component, and works fine as class component.

解决方法：

https://stackoverflow.com/questions/59825450/react-quill-custom-image-handler-module-causing-typing-issues-with-the-editor

用了这个方法，虽然不卡，但是图片又变成 base64 了...

继续参考：

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

都是扯淡。。。

难道要升级 React Quill 2 Beta ？？？ 来解决。

tyarn upgrade react-quill@beta

Error: ETXTBSY: text file is busy

关闭 web 服务，关闭 VS Code 再试就好了。

addRange(): The given range isn't in document.

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

I solve this issue by caching the modules props, instead of keep creating a new instance during each render.

无法换行

addRange(): The given range isn't in document.

解决方法：

const modules = React.useMemo(() => ({
        toolbar: {
            container: toolbarContainer,
            handlers: {
                image: imageHandler
            }
        },
    }), []);

onloadwff.js:71 Assertion failed: Input argument is not an HTMLInputElement

这个报错来自 chrome 插件。。。

并没有影响。

imageHandler 又失效了。。。

useMemo 之后，imageHandler 就失效了。。。

imageHandler 需要定义在 modules 之前。修改后就可以了。

因为这是函数式组件，但是为什么不报错呢？

真折腾

不得不吐槽 React Quill 文档真是不全，完全靠搜索解决问题。

再就是 React 引入的概念也太多，组件化带来了更多的维护成本和学习成本。 我觉得并没有太大的价值，不知道几年后 react 版本突飞猛进之后，这种组件谁还升级维护的过来。

react 的想法确实不错，但是奈何前端开发者普遍的技术能力跟不上，即便是阿里的 ant design 也是不过尔尔， 更不要提很多个人开发者维护的低质量 react 组件。

参考

https://segmentfault.com/a/1190000020844870

微信关注我哦 👍

我是来自山东烟台的一名开发者，有感兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊， 查看更多联系方式