富文本使用指南

Univer 提供了强大的富文本功能，可以在多个场景中使用，包括单元格内容、评论和超链接等。本指南将介绍如何使用富文本功能。

Facade API

Facade API 提供了一系列创建富文本相关对象的方法：

TypeScript

// 创建富文本const richText = univerAPI.newRichText()const richTextValue = univerAPI.newRichTextValue({ body: { dataStream: 'Hello Univer\r\n' } })// 创建段落样式const paragraphStyle = univerAPI.newParagraphStyle()const paragraphStyleValue = univerAPI.newParagraphStyleValue()// 创建文本样式const textStyle = univerAPI.newTextStyle()const textStyleValue = univerAPI.newTextStyleValue()// 创建文本装饰const decoration = univerAPI.newTextDecoration()

每个创建方法都有对应的 Builder 和 Value 版本：

Builder 版本（如 newRichText）用于创建和修改样式
Value 版本（如 newRichTextValue）用于创建只读的样式对象

基础概念

富文本系统主要包含两个核心组件：

TextStyle（文本样式）：控制文本的外观，如字体、大小、颜色等
ParagraphStyle（段落样式）：控制段落级别的格式，如对齐方式、缩进、行距等

文本样式设置

创建文本样式

TypeScript

// 创建一个基础的文本样式const textStyle = univerAPI.newTextStyle()  .setFontFamily('Arial')  .setFontSize(12)  .setItalic(true)  .setBold(true)  .build()// 创建带颜色的文本样式const coloredStyle = univerAPI.newTextStyle()  .setColor({ rgb: '#FF0000' }) // 设置红色文本  .setBackground({ rgb: '#FFFF00' }) // 设置黄色背景  .build()

文本装饰

TypeScript

// 添加下划线const underlineStyle = univerAPI.newTextStyle()  .setUnderline(    univerAPI.newTextDecoration()      .setShow(true)      .setColor({ rgb: '#0000FF' })      .setLineType(univerAPI.Enum.TextDecoration.SINGLE),  )  .build()// 添加删除线const strikethroughStyle = univerAPI.newTextStyle()  .setStrikethrough(    univerAPI.newTextDecoration()      .setShow(true),  )  .build()

段落样式设置

创建段落样式

TypeScript

// 创建基础段落样式const paragraphStyle = univerAPI.newParagraphStyle()  .setHorizontalAlign(univerAPI.Enum.HorizontalAlign.CENTER) // 居中对齐  .setLineSpacing(1.5) // 1.5倍行距  .build()// 设置段落缩进const indentedStyle = univerAPI.newParagraphStyle()  .setIndentFirstLine({ value: 2, unit: 'cm' }) // 首行缩进2厘米  .setIndentStart({ value: 1, unit: 'cm' }) // 左侧缩进1厘米  .build()

应用场景

1. 单元格富文本

有两种方式可以设置单元格的富文本：setRichTextValueForCell 和 setRichTextValues。

TypeScript

const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()const fRange = fWorksheet.getRange('A1:B2')console.log(fRange.getValue(true))// A1 单元格设置为富文本const richText = univerAPI.newRichText()  .insertText('Hello Univer')  .setStyle(0, 1, { bl: 1, cl: { rgb: '#c81e1e' } })  .setStyle(6, 7, { bl: 1, cl: { rgb: '#c81e1e' } })fRange.setRichTextValueForCell(richText)console.log(fRange.getValue(true).toPlainText()) // Hello Univer// A1:B2 单元格设置为富文本fRange.setRichTextValues([  [richText, richText],  [null, null],])console.log(fRange.getValue(true).toPlainText()) // Hello Univer

2. 评论富文本

TypeScript

// 添加带格式的评论const range = univerAPI.getActiveWorkbook()  .getActiveSheet()  .getActiveRange()// 创建评论内容const comment = univerAPI.newTheadComment()  .setContent(    univerAPI.newRichText()      .insertText('你好，请检查这个单元格的数据'),  )// 异步添加评论const success = await range.addCommentAsync(comment)if (success) {  console.log('评论添加成功')}

3. 超链接富文本

TypeScript

// 创建带超链接的富文本const range = univerAPI.getActiveWorkbook()  .getActiveSheet()  .getActiveRange()// 使用 newRichText().insertLink 创建超链接const richText = univerAPI.newRichText()  .insertLink('访问 Univer', '/')// 设置到单元格range.setRichTextValueForCell(richText)

你觉得这篇文档如何？