Rich Text Usage Guide

Univer provides powerful rich text features that can be used in various scenarios, including cell content, comments, and hyperlinks. This guide will introduce how to use the rich text functionality.

Facade API

Facade API provides a series of methods to create rich text related objects:

TypeScript

// Create rich textconst richText = univerAPI.newRichText()const richTextValue = univerAPI.newRichTextValue({ body: { dataStream: 'Hello Univer\r\n' } })// Create paragraph styleconst paragraphStyle = univerAPI.newParagraphStyle()const paragraphStyleValue = univerAPI.newParagraphStyleValue()// Create text styleconst textStyle = univerAPI.newTextStyle()const textStyleValue = univerAPI.newTextStyleValue()// Create text decorationconst decoration = univerAPI.newTextDecoration()

Each creation method has corresponding Builder and Value versions:

Builder versions (like newRichText) are used for creating and modifying styles
Value versions (like newRichTextValue) are used for creating read-only style objects

Basic Concepts

The rich text system mainly consists of two core components:

TextStyle (Text Style): Controls the appearance of text, such as font, size, color, etc.
ParagraphStyle (Paragraph Style): Controls paragraph-level formatting, such as alignment, indentation, line spacing, etc.

Text Style Settings

Creating Text Styles

TypeScript

// Create a basic text styleconst textStyle = univerAPI.newTextStyle()  .setFontFamily('Arial')  .setFontSize(12)  .setItalic(true)  .setBold(true)  .build()// Create a text style with colorsconst coloredStyle = univerAPI.newTextStyle()  .setColor({ rgb: '#FF0000' }) // Set red text  .setBackground({ rgb: '#FFFF00' }) // Set yellow background  .build()

Text Decorations

TypeScript

// Add underlineconst underlineStyle = univerAPI.newTextStyle()  .setUnderline(    univerAPI.newTextDecoration()      .setShow(true)      .setColor({ rgb: '#0000FF' })      .setLineType(univerAPI.Enum.TextDecoration.SINGLE),  )  .build()// Add strikethroughconst strikethroughStyle = univerAPI.newTextStyle()  .setStrikethrough(    univerAPI.newTextDecoration()      .setShow(true),  )  .build()

Paragraph Style Settings

Creating Paragraph Styles

TypeScript

// Create a basic paragraph styleconst paragraphStyle = univerAPI.newParagraphStyle()  .setHorizontalAlign(univerAPI.Enum.HorizontalAlign.CENTER) // Center alignment  .setLineSpacing(1.5) // 1.5 line spacing  .build()// Set paragraph indentationconst indentedStyle = univerAPI.newParagraphStyle()  .setIndentFirstLine({ value: 2, unit: 'cm' }) // First line indent 2cm  .setIndentStart({ value: 1, unit: 'cm' }) // Left indent 1cm  .build()

Use Cases

1. Cell Rich Text

There are two ways to set rich text for cells: setRichTextValueForCell and setRichTextValues.

TypeScript

const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()const fRange = fWorksheet.getRange('A1:B2')console.log(fRange.getValue(true))// Set A1 cell value to rich textconst richText = univerAPI.newRichText()  .insertText('Hello World')  .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 World// Set A1:B2 cell value to rich textfRange.setRichTextValues([  [richText, richText],  [null, null],])console.log(fRange.getValue(true).toPlainText()) // Hello World

2. Comment Rich Text

TypeScript

// Add formatted commentsconst range = univerAPI.getActiveWorkbook()  .getActiveSheet()  .getActiveRange()// Create comment contentconst comment = univerAPI.newTheadComment()  .setContent(    univerAPI.newRichText()      .insertText('Please check the data in this cell'),  )// Add comment asynchronouslyconst success = await range.addCommentAsync(comment)if (success) {  console.log('Comment added successfully')}

3. Hyperlink Rich Text

TypeScript

// Create rich text with hyperlinkconst range = univerAPI.getActiveWorkbook()  .getActiveSheet()  .getActiveRange()// Create hyperlink using newRichText().insertLinkconst richText = univerAPI.newRichText()  .insertLink('Visit Univer', '/')// Set to cellrange.setRichTextValueForCell(richText)

How is this guide?