关于富文本编辑器的图片处理

最新推荐文章于 2025-03-02 22:13:02 发布
原创 最新推荐文章于 2025-03-02 22:13:02 发布 · 2.9k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#小程序

本文讲述了在小程序中遇到的一个富文本编辑器图片显示bug，内容包括图片消失、图片数据格式不兼容以及图片超出页面范围的问题。通过检查JS代码，发现图片的data-src属性导致富文本编辑器无法显示，将data-src转换为src后，图片显示正常。但随后发现图片尺寸导致超出页面，通过添加class进行调整，成功解决了问题。

不经意间发现项目内有个bug
就是推文详情是使用富文本编辑器处理的，但是富文本编辑器支持的数据又比较局限，上一位前辈并没有把它处理好。于是就出现了如下画面：
文字都在，图不见了
在这里插入图片描述
控制台里也看不见在这里插入图片描述
也不知道问题出在哪里了，再看看JS代码吧。
在这里插入图片描述
打印content试试：在这里插入图片描述
很明显！content里有img图片！只是富文本编辑器不显示！
那先排除一下数据问题吧，富文本编辑器只支持img的src属性，数据里用的是data-src，那么我们把content当做字符串处理一下：

var content1=content.replace(/\ data-src/gi,  'src' );;

这样就可以了？在这里插入图片描述
当我打开另一篇推文，发现图片超出了页面范围。。。

最低0.47元/天 解锁文章
富文本框图片的处理
weixin_44540247的博客
04-28 4772
富文本框是一个可以兼容多种数据的文本框，比如文字，图片，表格等。它是通过数据的转换将所有的文本转换成可以显示的格式。那具体是怎么去处理数据的呢？例如图片，我先对流程进行简单分析： 创建一个实体类，判断文件是否为空，为空则提示， 不为空继续执行。获取文件的类型和名称，判断文件路径是否存在，不存在则创建，存在则继续执行。创建物理路径，判断文件类型是否为空，为空则提示，否则继续执行。将文件转换大小写，判...
富文本 和 图片裁切
weixin_50418353的博客
11-28 968
富文本编辑器和图片裁切一, 富文本编辑器的实现步骤1. 添加如下的 `layui `表单行：2. 导入富文本必须的 `script `脚本：3. 调用 `initEditor() 方法，`初始化富文本编辑器：二, 图片裁切的实现步骤1. 在` `中导入 `cropper.css `样式表：2. 在 `` 的结束标签之前，按顺序导入如下的 `js` 脚本：3. 在表单中，添加如下的表单行结构：4. 美化的样式5. 实现基本裁剪效果：三, 更换裁剪后的图片(不然的话拿到的还是裁剪前的)1. 拿到用户选择的文件2
富文本图片回显地址处理
最新发布
irisMoon06的博客
03-02 160
【代码】富文本图片回显地址处理。
富文本编辑框之不可编辑
李静静
10-11 7339
样式：(用于过滤图文中的图片替换url) 前端代码：  <!-- 加载编辑器的容器 --> <div class="form-group"> <label for="container...
富文本处理图片
艾米的猫儿的博客
12-25 711
【代码】富文本处理图片。
KINDEDITOR实现WORD粘贴公式自动上传
weixin_52041354的博客
07-31 1265
嗯，这是一个好问题，主要还是很多网友反馈了这个问题，有很多网友还是大学生，平时对这块的技术也比较感兴趣，希望通过源代码能够学习这块的技术，对自己也是一个提高，还有一些是自由职业者，平时在网上接一些网站做，然后有些用户也有这个需求，大多数企业网站管理员都不太懂技术，或者也有上班的员工。返回图片地址HTML，编辑器：FCKEditor，CKEditor，KindEditor，UEditor，TinyMCE，wangEditor，xhEditor，eWebEditor，JMEditor，CuteEditor，
精选资源
APP，微信小程序富文本编辑器（包含图片视频上传，地图选点）
12-22
本文将深入探讨一个专为APP和微信小程序设计的富文本编辑器，该编辑器支持图片和视频上传以及地图选点功能。 富文本编辑器是网页或应用程序中的一个重要组成部分，它允许用户创建和编辑包含各种格式（如字体、颜色...
解决layui富文本编辑器图片上传无法回显的问题
10-16
为了解决这个问题，开发者需要先了解layui富文本编辑器图片上传插件对返回数据结构的要求。具体来说，上传成功后返回的数据应该是一个对象，该对象至少包含两个字段：一个是表示上传成功与否的状态码（code），另一...
富文本编辑器富文本编辑器富文本编辑器
02-20
1、UEditor 百度的。 ... 缺点：不再维护，文档极少，使用并不普遍，图片只能上传到本地服务器，如果需要上传到其他...支持图片在线处理，插件多，功能强 编辑能力优秀，界面好看。 同样文档为英文，开发需要花时间。
js获取UEditor富文本编辑器中的图片地址
10-15
首先，要理解UEditor富文本编辑器，它是一款基于Web的JavaScript富文本在线编辑器，适用...通过以上步骤，开发者可以轻松地从UEditor富文本编辑器中提取所有嵌入的图片资源地址，进而实现图片资源的进一步操作和管理。
精选资源
PHP版百度富文本编辑器ueditor
08-08
**PHP版百度富文本编辑器ueditor** 在Web开发中，富文本编辑器是不可或缺的工具，它允许用户以类似于Microsoft Word的方式创建和编辑内容，然后以HTML格式存储。其中，百度开发的ueditor是一款非常受欢迎的开源富...
如何从WORD文档复制内容到富文本编辑器
alisky119的博客
07-16 1886
之前网上搜到的方案很少，现在由于HTML5的流行，chrome提供了相关的API，所以在网上也是能够搜到很多方案的，不过99%的方案实际上说的都是同一个方案，也就是借助于HTML5来实现，也就是借助于chrome的API来实现，这个方案的话也是能够满足一般的需求，但是兼容性方面有点问题，不能兼容IE浏览器，我们技术部在对这个方案进行测试的时候发现在有的用户电脑行，有的用户电脑不行，也没找到原因。网上确实也有很多文章提到了一些方案，但是项目组的同事试过，基本上一个能用的都没有。word图片快捷键粘贴，
富文本框的图片处理
weixin_44543090的博客
06-05 2805
下面我讲的是MVC中富文本框的图片处理； 先封装一个接收文件的实体，然后获取图片文件的类型 如：.png，再获取图片文件的名称和时间字符串。检查目录是否存在，如果存在就继续执行代码，如果不存在就新建一个目录，最后保存图片文件的路径。 判断上传后富文本框中图片是否为空，如果为空就提示用户上传文件为空，最后返回个上传失败。如果不为空就继续判断，判断是否为正确的图片文件类型，不能出现视频，音频，文本...
在线编辑器 从WORD中复制内容带多张图片
weixin_52041354的博客
08-06 1038
之前网上搜到的方案很少，现在由于HTML5的流行，chrome提供了相关的API，所以在网上也是能够搜到很多方案的，不过99%的方案实际上说的都是同一个方案，也就是借助于HTML5来实现，也就是借助于chrome的API来实现，这个方案的话也是能够满足一般的需求，但是兼容性方面有点问题，不能兼容IE浏览器，我们技术部在对这个方案进行测试的时候发现在有的用户电脑行，有的用户电脑不行，也没找到原因。下IDE，找JDK花了一些时间，然后又给他讲解图片上传的基础知识，再帮他写了一个测试代码，最后帮他调试成功。
quill富文本编辑器处理复制图像的解决方法
jansonKOU的博客
10-26 2592
quill编辑器对粘贴doc文档中图片的上传处理及单独粘贴图片时的上传处理
Vue +Element UI +vue-quill-editor 富文本编辑器及插入图片自定义
2401_84103675的博客
04-04 2181
在面试前我花了三个月时间刷了很多大厂面试题，最近做了一个整理并分类，主要内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。HTML5新特性，语义化浏览器的标准模式和怪异模式xhtml和html的区别使用data-的好处meta标签canvasHTML废弃的标签。
PHP 处理富文本编辑器中的图片
qq_26516097的博客
03-23 2492
$line=htmlspecialchars_decode(I("post.line")); $line2=str_replace('<img src="/Public/upload/','<img src="'.C("UPLOAD").'/Public/upload/',$line);
Qt 富文本处理（13）：图像
读书笔记
09-30 1679
文章目录前言QTextImageFormat 类代码示例总结 前言   富文本文档的图像由通过资源机制引用外部图像的文本片段表示。层次结构关系如下： QTextImageFormat 类   QTextImageFormat类提供QTextDocument中图像的格式信息。   QTextDocument 中的图像由通过资源机制引用外部图像的文本片段表示。图像是使用光标界面创建的，以后可以通过更改图像文本片段的字符格式进行修改。   内联图像由具有关联的QTextImageFormat的Unicode值U
富文本样式文字图片处理
weixin_46824709的博客
07-25 474
代码】富文本样式文字图片处理。
CKEditer富文本编辑器本地图片上传Demo演示
CKEditor是一款流行的开源富文本编辑器，它能够提供类似Microsoft Word的编辑体验给网页应用的用户。富文本编辑器允许用户在网页上直接编辑内容，使用如同在文字处理软件中一般的格式化选项。CKEditor支持各种功能，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端一名小学生

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值