uniapp富文本编辑器如何使用

在uniapp中使用富文本编辑器时遇到问题，编辑器无法正常显示或功能缺失。请问应该如何正确引入和使用富文本编辑器？是否有推荐的插件或组件？另外，如何实现图片上传、内容保存等常见功能？希望有具体的代码示例和配置说明。

2 回复

使用uniapp富文本编辑器，推荐使用官方插件或第三方组件如uParse。安装后引入组件，在页面中直接使用即可编辑富文本内容。


UniApp 中实现富文本编辑器通常使用第三方组件或插件。以下是常用方法及示例：

1. 使用官方 editor 组件（基础功能）

适用于简单图文编辑，支持插入图片、视频等。

<template>
  <editor 
    id="editor" 
    placeholder="开始输入..." 
    @ready="onEditorReady"
    @input="onInput"
  />
</template>

<script>
export default {
  methods: {
    onEditorReady(e) {
      console.log('编辑器初始化完成')
    },
    onInput(e) {
      // 获取内容（HTML格式）
      console.log(e.detail.html)
    }
  }
}
</script>

2. 使用 uParse 解析器（显示富文本）

用于渲染 HTML 内容（需下载 mp-html 插件）：

<template>
  <mp-html :content="htmlContent" />
</template>

<script>
import mpHtml from '@/components/mp-html/mp-html'
export default {
  components: { mpHtml },
  data() {
    return {
      htmlContent: '<p>带样式的<b>富文本</b></p>'
    }
  }
}
</script>

3. 第三方插件推荐

  • Quill 适配版：通过 vue-quill-editor 封装（需处理跨端兼容）
  • WangEditor：通过原生组件形式引入

注意事项：

  1. 小程序端需在 manifest.json 配置 "mp-weixin": { "usingComponents": true }
  2. 图片上传需自行实现接口
  3. 样式兼容需通过条件编译调整

建议根据具体平台（H5/小程序/App）选择合适方案，复杂场景推荐使用成熟的开源富文本库进行封装。

回到顶部