uni-app editor插入图片时执行多次input事件

uni-app editor插入图片时执行多次input事件

开发环境 版本号 项目创建方式
Windows Win10 HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：Win10

HBuilderX类型：正式

HBuilderX版本号：3.1.17

手机系统：Android

手机系统版本号：Android 10

手机厂商：OPPO

手机机型：oppo a3

页面类型：vue

打包方式：云端

示例代码：

<template>  
    <view>  
        <editor id="editorId" [@ready](/user/ready)="onEditorReady" [@input](/user/input)="bingEditorInput"></editor>  
    </view>  
</template>  

<script>  
export default {  
    data() {  
        return {  
            editorCtx:null  
        }  
    },  
    methods: {  
        onEditorReady:function(){  
            uni.createSelectorQuery()  
                .select('#editorId')  
                .context(res => {  
                    console.log(res.context);  
                    this.editorCtx = res.context;  
                    this.insertImageFun();  
                })  
                .exec();  
        },  
        insertImageFun:function(){  
            this.editorCtx.insertImage({  
                src: "/static/e415.png",  
                width: '25px',  
                height: '25px'  
            });  
        },  
        bingEditorInput:function(e){  
            console.log("bingEditorInput()")  
            console.log(e.detail.html);  
        }  
    }  
}  
</script>

操作步骤：

直接运行示例中的代码

预期结果：

只执行一次bingEditorInput方法

实际结果：

只执行3次bingEditorInput方法，并且每次输出的html代码都不一样，第一次是<img src="图片地址">，第二次是<img src="图片地址" width="25px">，第三次是<img src="图片地址" width="25px" height="25px">

bug描述：

<editor id="editorId" [@ready](/user/ready)="onEditorReady" [@input](/user/input)="bingEditorInput"></editor>  

1. 初始化editor
uni.createSelectorQuery().select('#editorId')
.context(res => {
this.editorCtx = res.context;
}).exec();  

2. 插入图片
this.editorCtx.insertImage({
src: "/static/e415.png",
width: '25px',
height: '25px'
});   

3. 监听内容改变，发现插入图片时，在insertImage()中每添加一个参数，就执行一次监听事件bingEditorInput()。

更多关于uni-app editor插入图片时执行多次input事件的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

bug已确认，预计下版修复

更多关于uni-app editor插入图片时执行多次input事件的实战教程也可以访问 https://www.itying.com/category-93-b0.html


你好，新版本并没有修复这个问题呀。

楼主，问题解决了吗，我看新版并没有修复这个问题吧。

是修复了的，你用的什么版本？

回复 DCloud_UNI_LXH: 您好，刚看了下已修复了哈，但是编缉器这块还有一个bug，具体请看这个帖子：https://ask.dcloud.net.cn/question/106391

这是一个已知的uni-app编辑器组件问题。当使用editorCtx.insertImage()方法插入图片时，每次设置图片属性（src、width、height）都会触发一次@input事件，导致多次回调。

问题分析：

  • 第一次触发：插入基础img标签，只有src属性
  • 第二次触发：添加width属性
  • 第三次触发：添加height属性

解决方案：

  1. 使用防抖处理（推荐）：
bingEditorInput: function(e) {
    clearTimeout(this.inputTimer);
    this.inputTimer = setTimeout(() => {
        console.log("最终内容：", e.detail.html);
        // 处理最终内容
    }, 100);
}
  1. 添加状态标记：
data() {
    return {
        editorCtx: null,
        isInserting: false
    }
},
methods: {
    async insertImageFun() {
        this.isInserting = true;
        await this.editorCtx.insertImage({
            src: "/static/e415.png",
            width: '25px',
            height: '25px'
        });
        setTimeout(() => {
            this.isInserting = false;
        }, 50);
    },
    bingEditorInput: function(e) {
        if (this.isInserting) return;
        console.log("内容变化：", e.detail.html);
    }
}
  1. 使用[@statuschange](/user/statuschange)替代（如果适用）：
<editor [@statuschange](/user/statuschange)="onStatusChange"></editor>
回到顶部