uni-app editor组件手动插入内容后，光标位置不正确，样式不生效

uni-app editor组件手动插入内容后，光标位置不正确，样式不生效

开发环境 版本号 项目创建方式
Windows 10 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

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

HBuilderX类型：正式

HBuilderX版本号：3.1.8

手机系统：Android

手机系统版本号：Android 10

手机厂商：小米

手机机型：MI 9

页面类型：vue

打包方式：云端

示例代码：

<template>  
    <view class="content">  
        <editor  
            id="editor"  
            placeholder="placeholder"  
            @ready="handleEditorReady"  
        ></editor>  
        <view>  
            <button type="primary" @click="handleTap">插入话题</button>  
        </view>  
    </view>  
</template>  

<script>  
export default {  
    data() {  
        return {  
            title: 'Hello'  
        }  
    },  
    onLoad() {  

    },  
    methods: {  
        handleTap() {  
            this.editorCtx.format('color', 'red')  
            this.editorCtx.insertText({  
                text: '#插入内容#'  
            })  
            this.editorCtx.removeFormat()  
            // this.editorCtx.insertText({  
            //  text: ' '  
            // })  
        },  
        handleEditorReady() {  
            uni.createSelectorQuery().select('#editor').context((res) => {  
                this.editorCtx = res.context  
            }).exec()  
        }  
    }  
}  
</script>  

<style>  
.content {  
    display: flex;  
    flex-direction: column;  
    align-items: center;  
    justify-content: center;  
    padding: 32rpx;  
}  
</style>

操作步骤：

  • editor组件里输入一段内容，然后将光标移到某个字符前（非最后一个）插入text

预期结果：

  • 被插入的内容样式生效，光标应在新插入内容后面

实际结果：

  • 样式不生效，光标位置移后了

bug描述：

editor组件手动插入内容后，光标跑到前面字符去了，而且手动插入的内容的样式不生效
附件含视频

editor.zip


更多关于uni-app editor组件手动插入内容后，光标位置不正确，样式不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

这个问题解决了么？现在在做 @用户 的功能，也是遇到这问题

更多关于uni-app editor组件手动插入内容后，光标位置不正确，样式不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的editor组件问题，在Android平台插入带格式文本时会出现光标位置异常和样式失效。

问题原因在于insertText和format方法的执行时序问题。当连续调用格式设置和插入操作时，编辑器可能无法正确应用样式并定位光标。

临时解决方案：

  1. 使用setTimeout延迟执行：
handleTap() {
    this.editorCtx.format('color', 'red')
    setTimeout(() => {
        this.editorCtx.insertText({
            text: '#插入内容#'
        })
        setTimeout(() => {
            this.editorCtx.removeFormat()
        }, 50)
    }, 50)
}
  1. 使用insertDivision分隔操作：
async handleTap() {
    await this.editorCtx.format('color', 'red')
    await this.editorCtx.insertText({
        text: '#插入内容#'
    })
    await this.editorCtx.insertDivision()
    await this.editorCtx.removeFormat()
}
回到顶部