wangEditor开发经历(踏坑之旅)

本文记录了在React项目中使用wangEditor作为富文本编辑器的过程,包括遇到的困难,如代码插入样式问题,版本更新问题,以及如何配置字体、背景颜色,手动上传图片和插入代码块功能。最终实现将HTML内容保存到数据库并能进行再次编辑的功能。
摘要由CSDN通过智能技术生成

官网: wangEditor - 轻量级 web 富文本编辑器

先说下背景吧,领导安排做个富文本编辑器。在编辑好文章直接保存html用小程序展现出来。看了下设计图感觉挺简单的,脑子一热打算全部手写。结果写了没两行代码就写不下去了。然后领导发了个网址让参考着做:图文排版 H5 - 秀米XIUMI,大家可以看下

然后后从网上筛选能用的编辑器 最开始用的Quill,花了几天的时间配置加研究结果发现插入代码有巨坑。插入的是带样式,带边框的那种,插入进去后无法删除

 大概的效果图是这样的。浪费了大约一周的时间吧,发现的问题越来越多,决定弃坑

然后从网上翻遍各种资料,决定下手wangEditor

本人框架是的是react

那就直接上手开始吧: 

npm i wangeditor --save

一定要看看本地wangeditor版本是不是最新的,我就上了一个大坑,根据官网的介绍,有的方法怎么写也不行,最后一查本地版本是v3版本。然后我就在本地升级 结果怎么也升不上去,最后手动改了下版本号才升上去的

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值