uni-app富文本/渲染/显示/图文混排方案。rich-text、uparse、v-html的区别

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

uni-app富文本/渲染/显示/图文混排方案。rich-text、uparse、v-html的区别

富文本渲染方案

1. rich-text

rich-text是uni-app的内置组件，提供了高性能的富文本渲染模式。 API参考 https://uniapp.dcloud.io/component/rich-text rich-text的优势是全端支持、高性能。有个缺陷是只能整体设点击事情，无法对富文本中的图片、超链接单独设点击事件。 如果是图片，可以把内容拆成多个rich-text解决。rich-text不支持内嵌视频也可以通过拆分多个rich-text，中间插入video来实现。 注：h5和app-nvue无此限制，支持链接等单独点击。

2. v-html

v-html指令，是web开发中很常用的。可惜由于小程序不支持html，使用场景受限。 在uni-app中，h5端和app-vue的v3编译器下可以使用v-html。其他环境无法支持。

3. uParse

由于小程序的rich-text组件在一些场景不满足需求，于是业内出现了wxparse等三方方案，把HTML或markdown格式的服务器数据源转为view来渲染。 但wxparse许久不更新，且不跨端，在uni-app插件市场出现了更多改进版的 parse 插件。 它们功能更强，支持直接渲染markdown或html的数据源为富文本，也支持其中的图片和超链接的点击处理，有的还支持表格和视频的处理。 但这些parser解决方案的性能不如rich-text。

注：app-nvue只能使用rich-text。

几种方案的特点讲清楚了，大家在开发中根据自己的需求选择合适的富文本渲染方案吧。

至于富文本编辑，即在输入框里图文混排内容，解决方案如下：

  • 在h5、app-vue、微信小程序，支持 editor组件
  • 在h5中，传统的富文本编辑仍可使用
  • 在非微信的其他小程序中，其官方没有提供解决方案，目前只能使用web-view组件套一个远程网页来满足这方面的需求。web-view组件是全端可用的解决方案。
  • 还有一种方案，不再编辑区直接预览效果，而是采用markdown编辑器方案，输入区输入markdown语法，预览区提供预览。这种方案是跨端的。插件市场搜富文本编辑，有不少插件。http://ext.dcloud.net.cn/search?q=%E5%AF%8C%E6%96%87%E6%9C%AC%E7%BC%96%E8%BE%91

Harmonyos Next教程
1 回复

在uni-app中实现富文本/渲染/显示/图文混排，rich-text、uparse和v-html各有其特点和适用场景。下面通过代码案例来展示这三者的区别及用法。

1. rich-text

rich-text 是 uni-app 内置的组件，用于渲染富文本内容。它支持 HTML 的部分标签，但功能相对有限。

<template>
  <view>
    <rich-text :nodes="htmlNodes"></rich-text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      htmlNodes: [
        {
          name: 'p',
          attrs: {},
          children: [
            {
              type: 'text',
              text: '这是一段富文本内容。'
            }
          ]
        }
      ]
    };
  }
};
</script>

2. uparse

uparse 是一个更为强大的富文本解析库，支持更多的 HTML 标签和样式，适合需要复杂富文本渲染的场景。使用前需要安装 uparse 组件。

<template>
  <view>
    <uparse :html="htmlContent"></uparse>
  </view>
</template>

<script>
import Uparse from '@/components/uparse/uparse.vue'; // 假设 uparse 组件放在这个路径

export default {
  components: {
    Uparse
  },
  data() {
    return {
      htmlContent: '<h1>标题</h1><p>这是一段<strong>加粗</strong>的文本。</p>'
    };
  }
};
</script>

3. v-html

v-html 是 Vue.js 提供的指令，用于将字符串当作 HTML 插入到 DOM 中。虽然简单直接，但存在 XSS 攻击风险，适用于信任内容来源的场景。

<template>
  <view>
    <view v-html="htmlContent"></view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      htmlContent: '<h1>标题</h1><p>这是一段<strong>加粗</strong>的文本。</p>'
    };
  }
};
</script>

总结

  • rich-text：适用于简单的富文本渲染，支持标签有限。
  • uparse：功能强大，支持复杂富文本和样式，适合复杂场景。
  • v-html：简单直接，但存在安全风险，适用于信任内容来源的场景。

选择哪种方案取决于具体需求，如富文本的复杂度、安全性考虑等。在开发过程中，务必根据实际需求进行权衡和选择。

回到顶部