「newbee-mall新蜂商城开源啦」 页面优化,最新版 wangEditor 富文本编辑器整合案例
大家比较关心的新蜂商城 Vue3 版本目前已经开发了大部分内容,相信很快就能够开源出来让大家尝鲜了,先让大家看看当前的开发进度:
开源仓库地址为 https://github.com/newbee-ltd/newbee-mall-vue3-app,升级完成后,代码会全部放在这个仓库中,感兴趣的可以先关注一下。不过还有些东西需要再完善一下,所以这篇文章就写点儿其他内容了。
正文
在开源项目达到一定规模时,社区就会给出非常多的反馈,想要开源保持长久的生命力和正向的影响力,定期维护和更新是十分必要的。同时,从另一个角度来说,这也是对该开源项目使用者负责。
新蜂商城项目自 2019 年 10 月开源到 GitHub 后已经取得了挺多的关注,直接已获得 5k+ star 和 1.3k 的 fork 数量,过程中也一直修改该开源项目存在的问题,很多问题其实都是用户提出来的,之后我再去进行修复和优化,此次修改的是商品详情编辑器。
新蜂商城开源项目的重要节点:
2020.3 ~ 2020.5 前后端分离版本开源
- 开发 newbee-mall 前后端分离版本,前端为 Vue 技术栈
- newbee-mall-vue-app 项目正式开源
- 修复了部分 bug
2019.11 ~ 2020.2 代码优化及 bug 处理
- 修复 SQL 注入问题
- 修复“订单相关的请求未拦截登陆状态”的问题
- 代码及注释的整理
- 添加全局异常处理
- 购物项数量验证逻辑修改
- 下架商品的访问限制和下单限制
2019.8 ~ 2019.10 新蜂商城正式开源
- 开发 newbee-mall 项目
- newbee-mall 项目正式开源
2018.10 构思新蜂商城项目
本次更新内容
更新记录大家可以在仓库的提交历史中查看:
此次更新主要是商品编辑页面的修改,包括页面排版更新、KindEditor 富文本编辑器删除和 wangEditor 富文本编辑器引入、后端图片上传接口修改和 SQL 文件的调整。
原编辑页面如下图所示:
更新后商品编辑页面如下图所示:
更换富文本编辑器,其实只修改代码就可以,为什么 SQL 语句也要更改,后面我会解释。
为什么做这次更新?
主要有以下三个原因:
- KindEditor 富文本编辑器长时间没有维护更新
大家可以点开 KindEditor 编辑器的开源仓库提交记录看一看,已经是一个长时间无维护更新的状态了,看了更新记录,很多都是 2016 年和 2017 年的更新,开发 newbee-mall 项目的时候是 2018 年底,所以当时也没有觉得特别别扭。
而现在,是在 2020 年底,这个时间跨度有点长了。
- 收到了很多关于编辑器的问题反馈
长时间未更新、各种浏览器却一直进行版本更新、再加上现在有些浏览器默认也不再开启 Flash,导致现在使用 KindEditor 编辑器会出现一些奇怪的问题。
我也修改过一部分问题,但是新的问题依然存在,兼容问题、图片上传问题等等,每过一段时间就会有使用 newbee-mall 项目的朋友向我反馈问题。
- wangEditor 富文本编辑器重启更新,V4 版本发布
问题很多,导致我之前也想过使用其他编辑器,但是并没有找到特别合适的,几个好用的编辑器也是和 KindEditor 一样的状态,很久不更新了,所以就没有更改。刚好前几天看到 wangEditor 编辑器的作者发文【长文】wangEditor V4.0 探索以团队的形式做开源项目,才知道 2020 年 wangEditor 编辑器又重启更新,因此决定更新一下 newbee-mall 项目的商品详情编辑器。
之前 wangEditor 也是很久没维护更新,看到作者的文章才知道又开始维护了,以下是作者的叙述:
特别是到了 2017 - 2018 年,自己实在是没有业余时间,所以就停止维护了。所以,在 V4 没有发布之前,大家看 github 代码的更新时间,都在 2 年之前了。对此我只能表示很无奈,不甘心,但又没办法。
2020 年春天,我从滴滴离职,业余时间就多一些了。我就想着把这个项目再重新做起来,于是就这样做了几个月,才有了现在的 V4 版本发布。
看到文章的当天下午,我就去看了一下 wangEditor 项目的开源仓库和使用文档,之后就把 wangEditor 整合进 newbee-mall 项目里,速度也算是比较快的了,测试完成后,于 2020.10.14 号将所有修改后的代码上传至 GitHub 开源仓库。
wangEditor 富文本编辑器的一个小问题
整合过程还是比较顺利的,因为使用文档比较清晰,主要是两个问题花了些时间:
- 一是文件上传代码需要重新写
- 二是编辑器在初始化时只会处理带有 html 标签的字符串,无 html 标签的字符串不会初始化到编辑器中
这里主要说一下第二个问题,如下图所示:
我们需要将 div1 初始化为编辑器模块,div1 中有两个字符串,一个带有 p 标签,一个不带 p 标签,初始化后只有带着 p 标签的字符串出现在编辑器中,而不带有 p 标签的字符串则出现在编辑器外。
对应到 newbee-mall 的商品详情编辑页面,就会出现下图中的情况:
想要编辑商品详情时,有些内容会出现在编辑器的外面。
我一开始以为我代码写错了,找问题找了一会儿,但是没发现哪里写错了。后面点了几个其他商品详情,我发现有的是正常的,有的是不正常的,而正常的就是有 html 标签的,不正常的都是这种纯字符串的,于是我把几个有问题的字符串包上 p 标签之后,一切正常了。
这个时候,我就想到,可能是 wangEditor 编辑器可能不支持这种纯字符串的内容,于是我到 wangEditor 的开源仓库中提了一个 issue:
该 issue 地址为:https://github.com/wangeditor-team/wangEditor/issues/2283
wangEditor 编辑器的作者 @wangfupeng 也很快回复了这条 issue:
想要渲染进编辑器中,必须要使用标签包裹,否则可能会出现额外的问题,暂时不支持该功能。
得到这个回复之后,我也就没继续追问下去,已经说得很清楚了,为了避免出现其他问题,所以要遵循一些规则,在 wangEditor 富文本编辑器支持该功能之前,我们尽量把需要初始化到编辑器中的内容字段,保证用 html 标签包裹。
而新蜂商城项目中的商品详情字段有很多都是纯字符串内容,由于项目中使用了 wangEditor 富文本编辑器,所以要对这些内容做一些修改去“适配”,于是我重新修改了 SQL 文件中的商品详情字段,对没有标签的数据进行修改,加上 html 标签:
这也是为什么在修改了代码之后,还要修改 SQL 语句的原因:
总结
好的,本次更新相关事宜已经介绍的差不多了,大家有什么问题也可以给我留言。后面有时间的话,我会继续整理一些 wangEditor 富文本编辑器的使用事项分享给大家。
另外,也有一点点小感慨,分享一下,勿喷,哈哈哈哈。
- 越来越觉得做开源不是一个很轻松的活儿,甚至觉得有些繁琐有些麻烦
- 能坚持维护更新开源项目的作者都值得一个大拇指,希望我也能一直坚持下去
- wangEditor 是一个很棒的富文本编辑器,如果项目中需要集成富文本编辑器的话,一定要尝试一下
除注明转载/出处外,皆为作者原创,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接,否则保留追究法律责任的权利。
「newbee-mall新蜂商城开源啦」 页面优化,最新版 wangEditor 富文本编辑器整合案例的更多相关文章
- 「newbee-mall新蜂商城开源啦」GitHub 上最热门的 Spring Boot 项目,我也要做一次靓仔!
没有一个冬天不可逾越,也没有一个春天不会到来. 介绍一下新蜂商城的近况,同时,新蜂商城 Vue 版本目前也在开发中,在这篇文章里我也向大家公布一下新蜂商城 Vue 版本的开发进度,和大家同步一下,在不 ...
- 「newbee-mall新蜂商城开源啦」 前后端分离的 Vue 版本即将开源
新蜂商城 Vue 版本 2019 年 10 月份我在 GitHub 开源仓库中上传了新蜂商城项目的所有源码,至今已经有小半年的时间了,感兴趣的可以去了解一下这个 Spring Boot 技术栈开发的商 ...
- 「newbee-mall新蜂商城开源啦」1000 Star Get !仓库Star数破千!记录一下
新蜂商城已经开源了 3 个多月左右的时间,在 2019 年的年末,仓库的 Star 数量冲破了 1000,整理本篇文章的时间是 2020 年 1 月 12 日,目前的 Star 数量是 1180 左右 ...
- 在Asp.Net或.Net Core中配置使用MarkDown富文本编辑器有开源模板代码(代码是.net core3.0版本)
研究如何使用Markdown你们可能要花好几天才能搞定,但是看我的文章或者下载了源码,你搞定一般在10分钟之内.我先给各位介绍下它: Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯 ...
- 商城项目整理(四)JDBC+富文本编辑器实现商品增加,样式设置,和修改
UEditor富文本编辑器:http://ueditor.baidu.com/website/ 相应页面展示: 商品添加: 商品修改: 前台商品展示: 商品表建表语句: create table TE ...
- JAVAEE——宜立方商城04:图片服务器FastDFS、富文本编辑器KindEditor、商品添加功能完成
1. 学习计划 1.图片上传 a) 图片服务器FastDFS b) 图片上传功能实现 2.富文本编辑器的使用KindEditor 3.商品添加功能完成 2. 图片服务器的安装 1.存储空间可扩展. 2 ...
- (转)淘淘商城系列——KindEditor富文本编辑器的使用
http://blog.csdn.net/yerenyuan_pku/article/details/72809794 通过上文的学习,我们知道了怎样解决KindEditor富文本编辑器上传图片时的浏 ...
- (转)学习淘淘商城第二十二课(KindEditor富文本编辑器的使用)
http://blog.csdn.net/u012453843/article/details/70184155 上节课我们一起学习了怎样解决KindEditor富文本编辑器上传图片的浏览器兼容性问题 ...
- 在Asp.Net Core中配置使用MarkDown富文本编辑器实现图片上传和截图上传(开源代码.net core3.0)
我们的富文本编辑器不能没有图片上传尤其是截图上传,下面我来教大家怎么实现MarkDown富文本编辑器截图上传和图片上传. 1.配置编辑器到html页 <div id="test-edi ...
随机推荐
- 02 ArcPython的使用大纲
一.什么情况下使用ArcPython? 1.现有工具实现不了,可以用python 2.流程化需要时,可以使用python 3.没有AE等二次开发环境 4.其他特殊场景 二.ArcPython在ArcG ...
- OpenCV中threshold函数的使用
转自:https://blog.csdn.net/u012566751/article/details/77046445 一篇很好的介绍threshold文章: 图像的二值化就是将图像上的像素点的灰度 ...
- Arduino Mega 2560
Arduino Mega 2560 www.theengineeringprojects.com/ 此板子有54个引脚,16个模拟量输入引脚,12个PWM输出引脚,4个串口,带I2C,SPI通讯口,更 ...
- SQL审核平台Yearning部署
SQL审核平台Yearning部署 Yearning优势: Yearning SQL 审计平台 基于Vue.js与Django的整套mysql-sql审核平台解决方案.提供基于Inception的S ...
- abp(net core)+easyui+efcore实现仓储管理系统——出库管理之二(五十)
abp(net core)+easyui+efcore实现仓储管理系统目录 abp(net core)+easyui+efcore实现仓储管理系统--ABP总体介绍(一) abp(net core)+ ...
- Fullscreen API与DOM监听API
前言 以下几个API,在web开发中可以简化我们一部分交互操作. Fullscreen API 有时候我们想要全屏预览的效果,比如类似于图片预览.幻灯片播放等.全屏API是一个很好的选择. 基本用法 ...
- 多测师讲解自动化测试 _RF关键字001_(上)_高级讲师肖sir
讲解案例1: Open Browser http://www.baidu.com gc #打开浏览器 Maximize Browser Window #窗口最大化 sleep 2 #线程等待2秒 In ...
- 动画演示Sunday字符串匹配算法——比KMP算法快七倍!极易理解!
前言 上一篇我用动画的方式向大家详细说明了KMP算法(没看过的同学可以回去看看). 这次我依旧采用动画的方式向大家介绍另一个你用一次就会爱上的字符串匹配算法:Sunday算法,希望能收获你的点赞关注收 ...
- S10 TES的八强赛,创造了奇迹,看看比赛时网友们怎么说的
前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理 我相信很多观众会和我一样吧,当TES赢下第一局后开始心怀侥幸,赢下第二局后觉 ...
- printStackTrace()造成的并发瓶颈
一 背景 在一次活动前的压测中,发现一个服务(平响为250ms左右)存在并发瓶颈,单实例的QPS压力从20升高到40后服务就雪崩了(平响急剧升高). 通过<jstack -F>命令查看线程 ...