Antd Pro 加入富文本编辑器

需求

• 能方便整合入 Ant Design Form 中
  
• 能支持，或者方便扩展，将富文本编辑器中的图片上传至七牛云存储中
  

备选方案列表

Ant Design 官方推荐了两个：

https://ant.design/docs/react/recommendation-cn

• React Quill。首选推荐。测试了一圈，确实这个最靠谱。
  
• Braft Editor。有 Ant Design 的集成说明文档：https://braft.margox.cn/demos/antd-upload
  

安装 Braft Editor

tyarn add braft-editor

参考文档：

https://www.yuque.com/braft-editor/be/lzwpnr

Braft Editor 不显示内容

https://github.com/margox/braft-editor/issues/341

最后一个答案，也没有解决我的问题。。。

Braft Editor 还是坑太多。。。

加上写法非常别扭，弃坑。

Braft Editor 没有外边框

https://github.com/margox/braft-editor/issues/564

facebook 的 draft.js

看来还是大厂出品才有品质保证

https://github.com/facebook/draft-js

tyarn add draft-js

安装时，那一堆 js 依赖警告，也是我非常厌恶 npm 的原因之一。

示例用的 function component 的写法

但是看不到工具栏啊。。。

原来 draft.js 并不是我想的那样可以直接作为富文本编辑器的。

https://zhuanlan.zhihu.com/p/24951621

暂时放弃。

react-quill

https://pro.ant.design/docs/import-cn

安装官方文档，很轻松就实现了富文本的编辑。

tyarn add react-quill

react-quill 确实是最简单易用的，Braft Editor sucks。

唯一的问题是，有警告提示，估计要升级到 v2 beta 版吧。我还是选择升级了 beta 版本：

tyarn upgrade react-quill@beta

当前最新的是 react-quill@2.0.0-beta.4

react_devtools_backend.js:2560 Warning: componentWillUpdate has been renamed, and is not recommended for use. See https://reactjs.org/link/unsafe-component-lifecycles for details.

* Move data fetching code or side effects to componentDidUpdate.
* Rename componentWillUpdate to UNSAFE_componentWillUpdate to suppress this warning in non-strict mode. In React 18.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.

Please update the following components: Quill

react-quill 上传图片到服务器

一定不能将 base64 格式的图片保存到富文本中，所以要加上图片异步上传的功能。

https://blog.csdn.net/hemyWeb/article/details/95181755

https://m.jb51.net/article/173138.htm

关于作者 🌱

我是来自山东烟台的一名开发者，有感兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊，或者关注我的个人公众号“大象工具”， 查看更多联系方式