uni-app 【报Bug】editor只读状态怎么给选中文本加背景色，:read-only="isRead"

uni-app 【报Bug】editor只读状态怎么给选中文本加背景色，:read-only=“isRead”

类别	信息
产品分类	uniapp/App
PC开发环境	Windows
PC开发环境版本	win10
HBuilderX类型	正式
HBuilderX版本	3.6.4
手机系统	Android
手机系统版本	Android 15
手机厂商	华为
手机机型	nova7
页面类型	vue
vue版本	vue2
打包方式	云端
项目创建方式	HBuilderX

操作步骤：

// 获取选中文字  
getSelectionText(cb) {  
    this.editorCtx.getSelectionText({  
        success: (res) => {  
            console.log('getSelectionText --> res',res);  
            console.log(res.text, '获取到的文字');  
            if (res.text == '') {  
                return uni.$u.toast('请选择高亮文字');  
            }  
            this.flag = false;  
            let timer = setTimeout(() => {  
                this.flag = true;  
                cb && cb(res)  
                clearTimeout(timer)  
                timer = null  

            }, 200);  
        },   
        fail() {  
            console.log('getSelectionText fail');  
        },  
        complete() {  
            // uni.showKeyboard(); //隐藏软键盘    
        }  
    });  
},  
//设置高亮  
handleHightLight() {  
    var that = this  
    console.log('this.isHightLightSelect', this.isHightLightSelect);  
    const ctx = this.editorCtx  
    this.getSelectionText(() => {  
        ctx.format('backgroundColor', '#FFD86A');  
        ctx.format('color', '#282A37');  
    })  
},

预期结果：

选中文本加背景色,软键盘不会闪现

实际结果：

选中文本加背景色,软键盘会闪现

bug描述：

editor只读状态怎么给选中文本加背景色，:read-only=“isRead” ,

this.isRead = false    
editorContext.format('backgroundColor', '#FF0000')  
this.isRead = true

这样先是编辑模式，然后改了颜色再设为只读模式，键盘会闪现

songsunli 1楼•9 小时前

在 uni-app 中，对于 editor 组件来说，实现只读状态下给选中文本加背景色的功能确实是一个挑战，因为 editor 组件在只读状态下通常不支持直接修改文本样式。不过，我们可以借助一些变通的方法来实现类似的效果。

一种可能的解决方案是，不直接使用 editor 组件的只读模式，而是使用 rich-text 组件来显示内容，并结合一个自定义的覆盖层来实现选中文本高亮显示的效果。以下是一个简化的示例代码，展示了如何实现这一思路：

HTML结构 (使用 rich-text 和一个覆盖层)：

<template>
  <view class="container">
    <rich-text :nodes="content"></rich-text>
    <view class="highlight-layer" :style="highlightStyle"></view>
  </view>
</template>

JavaScript逻辑 (处理文本选择和高亮显示)：

<script>
export default {
  data() {
    return {
      content: [
        {
          name: 'p',
          children: [
            {
              type: 'text',
              text: '这是一段示例文本，用于演示高亮功能。'
            }
          ]
        }
      ],
      highlightStyle: {
        position: 'absolute',
        backgroundColor: 'yellow',
        opacity: 0.5, // 可调整透明度
        left: 0,
        top: 0,
        width: 0,
        height: 0
      },
      selectedText: ''
    };
  },
  methods: {
    // 模拟文本选择事件（实际应用中需要监听用户的选择行为）
    simulateTextSelect(startIndex, endIndex) {
      const text = this.content[0].children[0].text;
      this.selectedText = text.substring(startIndex, endIndex);
      const range = this.getTextRange(text, this.selectedText);
      this.highlightStyle = {
        ...this.highlightStyle,
        left: `${range.left}px`,
        top: `${range.top}px`,
        width: `${range.width}px`,
        height: `${range.height}px`
      };
    },
    getTextRange(text, selectedText) {
      // 这是一个简化的示例，实际中需要根据字体大小、行高等计算精确位置
      const fontSize = 16; // 假设字体大小为16px
      const charWidth = 8; // 假设每个字符平均宽度为8px（实际中可能需要根据字体调整）
      const selectedLength = selectedText.length;
      return {
        left: selectedLength * charWidth, // 简化处理，仅作为示例
        top: 0, // 简化处理，仅作为示例
        width: selectedLength * charWidth,
        height: fontSize
      };
    }
  },
  mounted() {
    // 模拟选择文本"示例文本"
    this.simulateTextSelect(3, 7);
  }
};
</script>

CSS样式：

<style>
.container {
  position: relative;
}
.highlight-layer {
  position: absolute;
  pointer-events: none; /* 确保覆盖层不影响用户交互 */
}
</style>

请注意，上述代码仅作为演示用途，实际应用中需要根据具体的文本布局和样式来调整高亮层的位置和大小。此外，由于 uni-app 的跨平台特性，不同平台上文本渲染可能会有所不同，因此可能需要针对不同平台进行微调。