editorCtx.insertImage 插入图片，小程序会有多个 标签

分类：uni-app

editor uniapp

有没用办法解决这个问题啊？

用editorCtx.setContents 它的光标又不能自定义

2025-12-23 18:04 负责人:无分享

4 个回复

DCloud_UNI_JBB

你代码怎么写的

2025-12-23 18:57 分享

8***@qq.com (作者)

const editorCtx = this.editorCtx  

            const _this = this  

            await editorCtx.insertImage({  

                src: row.imgUrl,  

                width: '25px',  

                height: '25px',  

                extClass: 'emo-img-icon',  

            });

2025-12-24 09:02

DCloud_UNI_JBB

试试原生微信小程序这样写是否生效

2025-12-24 09:31
8***@qq.com (作者)

回复 DCloud_UNI_JBB: 能生效，如果你选择一张图片会加一个换行的标签

2025-12-24 09:57
DCloud_UNI_JBB

回复 8***@qq.com: 发一下你写的uniapp的代码和原生微信的代码

54 分钟前

8***@qq.com (作者)

editorCtx.setSelection 这个能用嘛？文档都没有这个方法

2025-12-24 09:56 分享

l***@sina.com

调用报错根本没setSelection这个方法啊

2025-12-24 09:59

l***@sina.com

文档上都没有setSelection这个方法

2025-12-24 09:58 分享

8***@qq.com (作者)

坑死了。。试了几个插件都是基于这个写的

2025-12-24 10:06

Ask小助手

该问题请在专业群（ uni-app 官方技术交流群 1 ）咨询

该问题源于微信小程序富文本编辑器的特性：当插入图片时，编辑器会自动添加 作为占位符，这是平台底层实现机制导致的（参考小程序平台兼容问题）。

解决方案：

插入后清理内容
调用insertImage后，立即通过editorCtx.getContents获取delta格式内容，遍历删除多余的空段落节点（如连续{type: 'p', children: [{text: ''}]}结构），再通过editorCtx.setContents重设内容。虽然setContents会重置光标，但可通过记录插入位置索引并在清理后调用editorCtx.setSelection恢复光标位置。

优先使用delta操作
避免直接操作HTML，改用delta格式插入图片（示例）：

editorCtx.insertImage({  
 src: '图片地址',  
 // 其他参数...  
 success: () => {  
   editorCtx.getContents({  
     success: (res) => {  
       // 清理res.delta.ops中多余的空段落  
       const cleanedDelta = cleanEmptyParagraphs(res.delta);  
       editorCtx.setContents(cleanedDelta);  
     }  
   });  
 }  
});

其中cleanEmptyParagraphs函数需自行实现过滤逻辑。

注意事项
- 微信平台对<div>等标签会自动转为（见支持的标签文档），这是正常行为。
- 若需深度定制，可尝试uni-app插件市场搜索"富文本增强"类插件。

建议结合editorContext.insertImage文档进行调试，重点处理delta数据结构而非HTML字符串。

内容为 AI 生成，仅供参考

要回复问题请先登录或注册

editorCtx.insertImage 插入图片，小程序会有多个<p><br></p>标签

4 个回复

公告

相关问题

editorCtx.insertImage 插入图片，小程序会有多个<p><br></p>标签

与内容相关的链接

4 个回复

公告

相关问题