Руководство по работе с форматированным текстом
Univer предоставляет широкие возможности для работы с форматированным текстом в различных сценариях, включая содержимое ячеек, комментарии и гиперссылки. В этом руководстве описано, как пользоваться этими возможностями.
Facade API
Facade API предоставляет набор методов для создания объектов, связанных с форматированным текстом:
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()У каждого метода создания есть варианты Builder и Value:
- варианты Builder (например,
newRichText) используются для создания и изменения стилей; - варианты Value (например,
newRichTextValue) используются для создания объектов стилей, доступных только для чтения.
Основные понятия
Система форматированного текста состоит из двух основных компонентов:
- TextStyle (стиль текста) управляет внешним видом текста: шрифтом, размером, цветом и другими параметрами.
- ParagraphStyle (стиль абзаца) управляет форматированием на уровне абзаца: выравниванием, отступами, межстрочным интервалом и другими параметрами.
Настройка стиля текста
Создание стилей текста
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()Оформление текста
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()Настройка стиля абзаца
Создание стилей абзаца
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()Примеры использования
1. Форматированный текст в ячейках
Задать форматированный текст в ячейках можно двумя способами: с помощью setRichTextValueForCell и 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 World2. Форматированный текст в комментариях
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. Форматированный текст с гиперссылкой
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)Насколько полезно это руководство?