uniapp editor组件,为什么小程序端拿不到数据是什么原因

在使用uniapp的editor组件时，小程序端无法获取到编辑器内的数据，请问是什么原因导致的？尝试过在@input或@blur事件中获取内容，但返回值为空。是否需要特殊配置才能正常获取数据？

2 回复

uniapp editor组件在小程序端拿不到数据，可能原因有：

  1. 未正确绑定input事件，需使用@input监听；
  2. 数据更新未触发setData，需手动调用；
  3. 小程序平台差异，需检查兼容性；
  4. 组件层级问题，数据未正确传递。

建议检查事件绑定和数据更新逻辑。


在UniApp中使用editor组件时，小程序端无法获取数据通常由以下原因导致：

  1. 数据绑定方式错误
    editor组件通过[@input](/user/input)或[@blur](/user/blur)事件获取内容，但需注意：

    • 使用event.detail.html获取富文本内容（小程序端）。
    • 使用event.detail.text获取纯文本内容。

  2. 平台差异处理不当
    小程序和H5的返回值结构不同：

    • 小程序端：event.detail = { html, text, delta }
    • H5端：event.target.innerHTML

  3. 未正确监听事件
    需在组件上绑定事件监听：

    <editor [@input](/user/input)="onEditorInput" [@blur](/user/blur)="onEditorBlur"></editor>

methods: {
  onEditorInput(event) {
    // 小程序端获取数据
    console.log('富文本内容:', event.detail.html);
    console.log('纯文本内容:', event.detail.text);
  }
}

  4. 组件未初始化完成
    在onReady生命周期后再操作组件（如通过ref调用）。

解决方案：
统一使用[@blur](/user/blur)事件，并兼容多平台：

<editor ref="editorRef" [@blur](/user/blur)="onEditorBlur"></editor>

methods: {
  onEditorBlur(event) {
    let content = '';
    // 判断平台
    #ifdef MP-WEIXIN
    content = event.detail.html; // 小程序取html
    #endif
    #ifdef H5
    content = event.target.innerHTML; // H5取innerHTML
    #endif
    console.log('编辑器内容:', content);
  }
}

注意事项：

  • 避免在[@input](/user/input)中频繁操作数据（可能引发性能问题）。
  • 使用ref调用editorContext方法时，需在组件渲染完成后执行。

通过以上调整即可解决小程序端获取数据失败的问题。

回到顶部