富文本组件

rich-text 是 Uniapp 中用于展示富文本的核心组件。它支持通过 nodes 属性传入 HTML 结构或富文本节点列表，以渲染图文并茂的内容。开发者可以通过 rich-text 组件将文本、图片、链接等多种元素以富文本形式展示，且该组件主要用于内容展示，屏蔽了大部分事件。

1. 什么是 rich-text 组件？

rich-text 组件允许开发者通过 HTML 标签或节点列表，渲染复杂的富文本内容。它常用于展示动态内容、文章、博客等需要图文混排的场景，并支持展示的文本、图片、链接等元素的基本样式控制。

使用场景

• 动态内容展示：用于展示通过接口获取的 HTML 富文本，如新闻、博客、文章等。
• 图文混排：在页面中展示富文本内容，支持混合图片和文本的排版。
• 内容预览：结合 HTML 标签渲染富文本内容，在多个平台上实现一致的内容展示。

2. rich-text 组件的常用属性

rich-text 组件的核心属性是 nodes，它决定了组件中渲染的内容，可以接受 HTML 字符串或节点列表。

属性名	类型	默认值	说明	平台差异说明
nodes	Array / String	[]	富文本内容的节点列表或 HTML 字符串，推荐使用数组类型以提升性能	无
space	String	无	显示连续空格，支持 ensp、emsp、nbsp	App、H5、微信小程序等
selectable	Boolean	true	是否允许富文本中的文本可以长按选中，可用于复制等操作	百度小程序仅真机支持
image-menu-prevent	Boolean	false	是否阻止长按图片时弹出的默认菜单，适用于百度小程序，且只在初始化时有效	无
preview	Boolean	true	是否允许点击预览富文本中的图片	无

2.1 nodes 属性

• 说明：nodes 可以是 HTML 字符串或者节点列表。推荐使用节点列表，以避免将 HTML 字符串转换为节点列表时产生的性能开销。

节点列表结构：

• 元素节点：type 为 node，包含 name（标签名称），attrs（标签属性），children（子节点列表）。
• 文本节点：type 为 text，包含 text（文本内容）。

{
  name: 'div',
  attrs: { class: 'my-class', style: 'color: red;' },
  children: [{ type: 'text', text: 'Hello World' }]
}

2.2 支持的 HTML 标签与属性

rich-text 支持部分 HTML 标签和属性，常见标签如下：

标签	支持的属性
a	href, target
img	src, alt, width, height
div	class, style
p	class, style
span	class, style

---

3. 数组与字符串形式的 nodes

以下案例展示了如何使用 rich-text 组件通过 nodes 属性传递节点数组和 HTML 字符串来渲染富文本内容。

<template>
  <view class="content">
    <!-- 数组形式的节点 -->
    <view class="section-title">数组类型: nodes 属性为 Array</view>
    <view class="rich-text-box">
      <rich-text :nodes="nodesArray"></rich-text>
    </view>

    <!-- 字符串形式的 HTML -->
    <view class="section-title">字符串类型: nodes 属性为 String</view>
    <view class="rich-text-box">
      <rich-text :nodes="htmlString"></rich-text>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

// 节点数组
const nodesArray = ref([
  {
    name: 'div',
    attrs: { class: 'rich-text-div', style: 'text-align: center; color: blue;' },
    children: [{ type: 'text', text: '这是一个富文本组件的示例' }]
  }
])

// HTML 字符串
const htmlString = ref('<div style="text-align: center;"><img src="https://example.com/image.png" alt="Example Image"/></div>')
</script>

<style scoped>
.content {
  padding: 20px;
}

.section-title {
  font-size: 18px;
  font-weight: bold;
  margin-top: 20px;
}

.rich-text-box {
  padding: 10px;
  background-color: #f9f9f9;
  border-radius: 8px;
  margin-top: 10px;
}
</style>

代码解析

1. nodes 属性传递节点数组：

   • 通过 nodesArray 传递一个包含 div 和 text 节点的数组，展示简单的文本内容。

2. nodes 属性传递 HTML 字符串：

   • 通过 htmlString 传递 HTML 字符串，展示一个带有图片的 div 元素。

3. 样式设计：

   • rich-text-box 用于包裹富文本内容，设置了背景色和圆角效果，提升界面观感。