summernote富文本的改写onImageUpload在服务器上传图片,并利用MutationObserver实时监测进行图片在服务器删除

本文介绍了如何改写summernote的onImageUpload方法,以将图片上传到服务器而不是以base64格式存储。此外,文章讨论了如何利用MutationObserver进行图片的实时监测和删除。作者提供了基于jQuery和PHP的解决方案,并提醒读者注意图片大小可能导致的PHP配置问题,如max_execution_time、post_max_size和upload_max_filesize。代码实现可在GitHub上找到。
  1. 首先,声明,先去自行了解什么是summernote富文本编辑器:https://summernote.org/
    个人看法:主要是为了后台可以进行编辑,就好比你在公众号写文章,也是基于富文本编辑器来写的。

     
  2. 为什么选用summernote?原因有几点
    (2.1)summernote支持bootstrap前端框架:http://www.bootcss.com/,现在bootstrap使用非常普遍了,最主要的亮点就是响应式布局,而且手机(移动设备)优先。非常适合现在庞大的手机用户浏览。所以summernote也非常适合在手机进行文本编辑

    (2.2)bootstrap也有自带的富文本编辑器:bootstrap-wysiwyg,但是为什么不用这个呢?原因是summernote可以插入视频。但是其他很多富文本编辑器也可以插入视频啊?我说的是国内的视频,其他国外富文本编辑器大多数只能插入YouTube了,而summernote很神奇,可以插入腾讯视频,优酷的也行,所以非常推荐编辑文本时候需要插入视频的小编使用summernote。

    (2.3)summernote真的非常简洁,但是功能却很完善,还可以自定义工具栏,emoji也不例外,但是由于关于summernote插入emoji的文章用法大部分都是在本地加载emoji,可以参考一下:https://github.com/summernote/awesome-summe
### 如何处理后端返回的富文本中包含的图片格式 当后端返回的富文本中包含特定的图片格式(如 `webp`),而这些格式可能不被某些平台支持(如 iOS 不完全兼容 `webp` 格式)时,可以通过前端对富文本内容进行预处理。以下是具体的解决方案: #### 使用正则表达式替换图片格式 在前端接收到后端返回的富文本数据后,可以利用 JavaScript 的正则表达式将指定的图片格式替换成更通用的格式。例如,在上述场景中,由于 `webp` 格式的图片在 iOS 设备上无法正常显示,因此可以选择将其替换为 `jpg` 或其他兼容性更好的格式。 代码实现如下: ```javascript // 假设 res.goods_introduce 是后端返回的富文本字符串 res.goods_introduce = res.goods_introduce.replace(/<img /g, '<img style="display: block;"').replace(/\.webp/g, '.jpg'); ``` 此方法通过两个 `.replace()` 调用来完成操作: 1. 添加 `<img>` 标签的样式属性以优化展示效果[^1]; 2. 将所有的 `.webp` 后缀替换为 `.jpg`,从而提升跨设备兼容性。 --- #### 动态调整图片路径 除了简单的格式替换之外,还可以动态修改图片的实际请求路径。例如,假设存在一个服务能够实时将 `webp` 图片转换为 `jpg` 格式,则可以在正则匹配到 `src` 属性时对其进行改写。 示例代码如下: ```javascript function convertWebPToJPG(htmlContent) { return htmlContent.replace(/<img.*?src="(.*?)".*?>/gi, (match, p1) => { const newSrc = p1.includes('.webp') ? p1.replace(/\.webp$/, '.jpg') : p1; return match.replace(p1, `${newSrc}`); }); } res.goods_introduce = convertWebPToJPG(res.goods_introduce); ``` 这种方法更加灵活,适用于复杂的业务逻辑需求。 --- #### 结合第三方库增强功能 对于一些复杂的需求,可以直接借助成熟的第三方工具来解析渲染富文本内容。例如,在微信小程序开发中,常使用的 `wxParse` 工具可以帮助开发者轻松处理 HTML 数据适配小程序环境[^5]。 安装与使用示例: ```bash npm install wxparse --save ``` 引入调用: ```javascript let WxParse = require('../../utils/wxParse/wxParse.js'); // 文件路径需根据实际项目结构调整 WxParse.wxParse('article', 'html', res.goods_introduce, that, 0); // 渲染富文本至页面组件 ``` 需要注意的是,如果原始富文本中的图片仍采用不可兼容的格式(如 `webp`),那么仍然需要先执行前述的正则替换步骤后再传递给 `wxParse` 进行进一步处理。 --- #### 总结 针对后端返回的富文本中所含有的特殊图片格式问题,推荐采取以下策略: 1. 利用 **JavaScript 正则表达式** 对目标标签及其属性值实施批量替换; 2. 若涉及更多高级定制化需求,则可考虑集成专门用于解析渲染富文本内容的第三方类库; 3. 在必要情况下,结合服务器侧资源转化能力共同解决问题。 以上方案均能有效改善用户体验,减少因浏览器或操作系统差异带来的视觉异常现象。 ---
评论 12
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值