uni-app editorContext.format在有键盘时会导致@statuschange执行两次，并且第二次event.detail会被清空

uni-app editorContext.format在有键盘时会导致@statuschange执行两次，并且第二次event.detail会被清空

开发环境 版本号 项目创建方式
Mac Big Sur HBuilderX 
### 示例代码：
```vue
<template>  
    <view>  
        <button @click="setFormat()" style="margin: 20px;" type="primary">设置format</button>  
        <editor style="height: 750rpx; background-color: #C0C0C0;" id="editor" showImgSize showImgToolbar showImgResize @ready="onEditorReady" @statuschange="onStatusChange"></editor>  
    </view>  
</template>  
<script>  
    export default {  
        methods: {  
            setFormat() {  
                this.editorCtx.format('bold', true)  
            },  
            onEditorReady() {  
                uni.createSelectorQuery().select('#editor').context((res) => {  
                    this.editorCtx = res.context  
                    let html = ''  
                    for (let i=1; i<=5; i++) {  
                        html += '第'+i+'行<br>'  
                    }  
                    this.editorCtx.setContents({  
                        html: html  
                    })  
                }).exec()  
            },  
            onStatusChange(event) {  
                console.log(event.detail)  
            }  
        }  
    }  
</script>

操作步骤：

  1. 新建.vue页面，清空.vue页面的所有代码，将“代码示例”里的代码复制到新建的.vue页面里
  2. 运行到真机，点击editor里任意一行，唤起输入法
  3. 点击“设置format”按钮，这时会打2条log，第一条event.detail是 {“bold”:true}，但是第二条又来了个{}，也就是第二条event.detail被清空，如图：

示例图片

预期结果：

点击“设置format”按钮只打印一条log

实际结果：

点击“设置format”按钮，这时会打2条log，第一条event.detail是 {“bold”:true}，但是第二条又来了个{}，也就是第二条event.detail被清空

bug描述：

editorContext.format在有键盘时会导致@statuschange执行两次，并且第二次event.detail会被清空


更多关于uni-app editorContext.format在有键盘时会导致@statuschange执行两次，并且第二次event.detail会被清空的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app editorContext.format在有键盘时会导致@statuschange执行两次，并且第二次event.detail会被清空的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的uni-app编辑器组件在iOS平台上的兼容性问题。当键盘激活状态下调用editorContext.format()方法时，会触发两次@statuschange事件。

第一次触发返回正确的格式状态{"bold":true}，第二次触发返回空对象{}。这是由于iOS系统键盘与编辑器组件交互时，格式操作会临时改变编辑器的焦点状态，导致状态变更事件被重复触发。

目前可以通过在事件处理函数中添加防抖逻辑来临时解决：

onStatusChange(event) {
  if (Object.keys(event.detail).length > 0) {
    console.log(event.detail)
  }
}

或者使用定时器合并短时间内的事件触发：

let statusTimer = null
onStatusChange(event) {
  clearTimeout(statusTimer)
  statusTimer = setTimeout(() => {
    if (Object.keys(event.detail).length > 0) {
      console.log(event.detail)
    }
  }, 50)
}
回到顶部