uni-app editor组件的context没有setContents函数

发布于 1周前 作者 vueper 来自 Uni-App

uni-app editor组件的context没有setContents函数

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

示例代码：

<template>  
    <view>  
        <view style="margin-top:88px;">  
            <view>Test article</view>  
            <view><editor id="test" @ready="editorReady"></editor></view>  
        </view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  

            }  
        },  
        methods:   
        {  
            editorReady()  
            {  
                uni.createSelectorQuery().select('#test').context((nodeContext) =>  
                {  
                    console.log('>>>', nodeContext)  
                    nodeContext.setContents({  
                        html: '<p>abcdefg</p>'  
                    })  
                }).exec()  
            }  
        }  
    }  
</script>

操作步骤：

  • 以上page直接打开

预期结果：

  • editor容器显示abcdefg

实际结果：

[system] WeChatLib: 3.5.2 (2024.7.31 22:00:40)  
[system] Subpackages: N/A  
[system] LazyCodeLoading: false  
App.vue:56 [App.vue] Launch, os = ios, deviceId = 17259582958709331537  
ob.user.js:17 [UserOB] Initialized  
App.vue:69 [App.vue] App Show  
[基础库] 正在使用灰度中的基础库 3.5.2 进行调试。如有问题，请前往工具栏-详情-本地设置更改基础库版本。  
[system] Launch Time: 706 ms  
articleview.vue:23 >>> {context: hae}  
TypeError: nodeContext.setContents is not a function  
    at Object.<anonymous> (articleview.vue:24)  
    at Function.<anonymous> (WAServiceMainContext.js?t=wechat&s=1726539162520&v=3.5.2:1)  
    at :34961/appservice/<SelectorQuery callback function>  
    at WAServiceMainContext.js?t=wechat&s=1726539162520&v=3.5.2:1  
    at WAServiceMainContext.js?t=wechat&s=1726539162520&v=3.5.2:1  
    at Array.forEach (<anonymous>)  
    at WAServiceMainContext.js?t=wechat&s=1726539162520&v=3.5.2:1  
    at WAServiceMainContext.js?t=wechat&s=1726539162520&v=3.5.2:1  
    at WASubContext.js?t=wechat&s=1726539162520&v=3.5.2:1  
    at ge (WASubContext.js?t=wechat&s=1726539162520&v=3.5.2:1)(env: Windows,mp,1.06.2405020; lib: 3.5.2)

bug描述：

<editor>获取了context后setContents提示is not a function

Harmonyos Next教程
11 回复

补充一下，这个问题只出现在微信小程序中（真机和模拟器都有），但H5（无论公众号还是网页）都没问题。


你好，你是vue2出现的这个问题，还是vue3出现的问题？

vue2

你这是少了一个context，需要这样来调用：`nodeContext.context

<script> export default { data() { return { } }, methods: { editorReady() { uni.createSelectorQuery().select('#test').context((nodeContext) => { console.log('>>>>>', nodeContext) nodeContext.context.setContents({ html: '

abcdefg

' }) }).exec() } } } </script>

感谢，这个方式确实解决了page的问题，但当这个editor在component里时还是不行。虽然不报错了，但没任何反应……我还特意加了个timeout怕是DOM渲染问题。

log输出

UI层也确实一直显示placeholder的内容，所以我确定是没完成渲染，不是ui排布的问题…… =___=||

回复 Monokeros: 好的，我看一下

似乎与放到组件里面，也没有关系，我这里测试放到组件里面也是正常的

@@" 这就很奇怪了，而且这个bug我是刚发现的，同样的代码从公众号H5一直过来的component，在H5那边完全没问题……我再试试，谢谢！

在 uni-app 中使用 editor 组件时，确实可能会遇到一些 API 差异或限制，尤其是在与原生小程序或其他跨平台框架对比时。如果你发现 editor 组件的 context 没有 setContents 函数，这通常意味着你正在使用的 uni-app 版本或者其封装的 editor 组件 API 不直接支持该函数。不过，你可以通过其他方式来实现类似的功能。

以下是一个使用 uni-app 的 editor 组件并通过编程方式设置编辑器内容的示例代码。请注意，由于 uni-app 的 API 可能会随着版本更新而变化，以下代码基于常见的使用场景和假设。

首先，确保你的 uni-app 项目中包含了 editor 组件：

<template>
  <view>
    <editor ref="myEditor" :placeholder="placeholder" v-model="content" @input="handleInput" />
    <button @click="setContent">Set Content</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      placeholder: '请输入内容...',
      content: ''
    };
  },
  methods: {
    handleInput(e) {
      this.content = e.detail.html; // 更新绑定的内容
    },
    setContent() {
      // 这里我们直接更新 data 中的 content，这将触发 v-model 绑定的更新
      this.content = '<p>这是通过编程方式设置的内容。</p>';
      // 如果需要更底层的操作（比如直接操作编辑器实例），可能需要通过 ref 访问 DOM 元素或使用平台特定的 API
      // 但由于 uni-app 的封装，直接操作 DOM 或使用特定平台的 API 可能不是跨平台的解决方案
      // this.$refs.myEditor.someNativeMethod(); // 假设存在这样的方法，但实际上可能不存在
    }
  }
};
</script>

<style>
/* 添加你的样式 */
</style>

在这个例子中，我们使用了 v-model 来双向绑定编辑器的内容。通过点击按钮调用 setContent 方法，我们可以更新编辑器的内容。这种方法利用了 uni-app 的数据绑定机制，而不是直接调用 setContents 函数（因为该函数可能不存在）。

如果你确实需要更底层的控制（比如在小程序中使用特定的 API），你可能需要考虑条件编译或者平台特定的代码路径。然而，这通常会增加代码的复杂性和维护成本。在大多数情况下，利用 uni-app 提供的跨平台 API 和机制应该足够满足大多数需求。

回到顶部