uni-app editor 组件内无法获取 editorcontext

uni-app editor 组件内无法获取 editorcontext

产品分类：
uniapp/小程序/微信

PC开发环境操作系统：
Windows

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

HBuilderX类型：
正式

HBuilderX版本号：
3.0.5

第三方开发者工具版本号：
1.05.2103172

基础库版本号：
2.16.0

项目创建方式：
HBuilderX

示例代码：

目录结构看第二个图
主页面代码

<template>  
    <view class="container">  
        <djc :edit="edit"></djc>  
        <button @click="edit = true">dsalfkjdskalfjlksda</button>  
    </view>  
</template>  

<script>  
import djc from "../../components/djc/djc.vue";  
export default {  
    components: {djc},  
    data() {  
        return {  
            edit: false,  
        };  
    },  
    methods: {},  
};  
</script>

插件页面代码

<template>  
    <view class="container">  
        <editor v-if="edit" id="editor" class="ql-container" :placeholder="placeholder" @ready="onEditorReady"></editor>  
    </view>  
</template>  

<script>  
export default {  
    props: {  
        edit: {  
            type: Boolean,  
            default() {  
                return false;  
            },  
        },  
    },  

    methods: {  
        onEditorReady() {  
            // #ifdef MP-BAIDU  
            this.editorCtx = requireDynamicLib("editorLib").createEditorContext("editorId");  
            // #endif  

            // #ifdef APP-PLUS || H5 ||MP-WEIXIN  
            uni.createSelectorQuery()  
                .select("#editor")  
                .context((res) => {  
                    this.editorCtx = res.context;  
                })  
                .exec();  
            // #endif  
        },  
    },  
};  
</script>

操作步骤：

将editor 放到组件里面, 就无法获取其 editorcontext

预期结果：

应该获取到

实际结果：

没获取到

bug描述：

将editor 放在components 里面的时候,小程序onEditorReady 获取不到 editorcontext
将editor 放在最外面就可以获取到

第一个图是报错
第二个图是报错的代码
第三个图是不报错的图和代码

h5 页面能正常获取,
微信小程序拿不到

找到问题了,组件要加 uni.createSelectorQuery()
.in(this)


更多关于uni-app editor 组件内无法获取 editorcontext的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app editor 组件内无法获取 editorcontext的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个常见的小程序组件内节点查询问题。在微信小程序中，当editor组件位于自定义组件内部时，需要使用.in(this)来指定查询范围。

正确的解决方案是在组件的onEditorReady方法中修改选择器查询：

onEditorReady() {
    // #ifdef MP-WEIXIN
    uni.createSelectorQuery()
        .in(this)
        .select("#editor")
        .context((res) => {
            this.editorCtx = res.context;
        })
        .exec();
    // #endif
    
    // 其他平台的代码保持不变
}
回到顶部