需求
- 能方便整合入 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 聊聊， 查看更多联系方式
谈笑风生
zb （来自: 中国 山西 太原 电信） 2年前