Antd Pro 加入富文本编辑器

更新日期: 2021-12-24 阅读次数: 11309 字数: 466 分类: ReactJS

需求

  • 能方便整合入 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

tags: Ant Design Pro

关于作者 🌱

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

谈笑风生

zb

公司逼得学习react,无意中搜到这,哎不容易呀