editor组件在uni-app的right-window中无法正常使用

editor组件在uni-app的right-window中无法正常使用

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

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：4.45

浏览器平台：Edge

浏览器版本：132.0.2957.140


示例代码：

``` html
<template>  
  <view>  
    <button @click="addText">添加文本</button>  
    <editor id="editor" @ready="handleEditorReady" />  
  </view>  
</template>  

<script setup>  
import { getCurrentInstance } from 'vue'  
const instance = getCurrentInstance()  
let editorCtx  
function handleEditorReady() {  
  console.log('1', instance)  
  uni  
    .createSelectorQuery()  
    .in(instance) // 不加这个获取不到context  
    .select('#editor')  
    .context((res) => {  
      editorCtx = res.context  
      console.log(editorCtx)  
    })  
    .exec()  
}  

function addText() {  
  editorCtx.insertText({  
    text: 'abc',  
    complete(err) {  
      console.log(err)  
    },  
  })  
}  
</script>  

<style></style>

操作步骤：

  1. 建一个普通uniapp项目，增加right-window页面并配置左右结构
  2. 将上述示例代码放在pages/index/index.vue中正常运行
  3. 将上述示例代码放在window/right-window.vue中无法正常往editor中添加文本

预期结果： 在window/right-window.vue中应可以正常往editor中添加文本

实际结果： 在window/right-window.vue中无法正常往editor中添加文本

bug描述： 项目适配pc，分左右结构，左边主页面，右边增加right页面，右边需要使用editor组件，发现无法正常使用，相同代码放在左边主页面则可以正常使用


更多关于editor组件在uni-app的right-window中无法正常使用的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

项目代码

更多关于editor组件在uni-app的right-window中无法正常使用的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的uni-app在right-window中使用editor组件的兼容性问题。主要原因是在right-window环境下，editor组件的上下文获取方式需要特殊处理。

解决方案如下：

  1. 修改获取editor上下文的方式，使用setTimeout延迟获取：
function handleEditorReady() {
  setTimeout(() => {
    uni.createSelectorQuery()
      .in(instance)
      .select('#editor')
      .context((res) => {
        editorCtx = res.context
        console.log('获取到editor上下文:', editorCtx)
      })
      .exec()
  }, 300)
}
  1. 确保在操作editor前上下文已正确初始化：
function addText() {
  if(!editorCtx) {
    console.warn('editor上下文未初始化')
    return
  }
  editorCtx.insertText({
    text: 'abc',
    complete(err) {
      console.log(err)
    }
  })
}
回到顶部