Guía de uso de texto enriquecido
Univer proporciona potentes funciones de texto enriquecido que se pueden usar en varios escenarios, incluidos contenido de celda, comentarios e hipervínculos. Esta guía presentará cómo utilizar la funcionalidad de texto enriquecido.
API de Facade
API de Facade proporciona una serie de métodos para crear objetos relacionados con texto enriquecido:
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()Cada método de creación tiene versiones de Builder y Value correspondientes:
- Las versiones de Builder (como
newRichText) se usan para crear y modificar estilos - Las versiones de Value (como
newRichTextValue) se usan para crear objetos de estilo de solo lectura
Conceptos básicos
El sistema de texto enriquecido consta principalmente de dos componentes principales:
- TextStyle (estilo de texto): controla la apariencia del texto, como la fuente, el tamaño, el color, etc.
- ParagraphStyle (Estilo de párrafo): controla el formato a nivel de párrafo, como alineación, sangría, interlineado, etc.
Configuración de estilo de texto
Creación de estilos de texto
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()Decoraciones de texto
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()Configuración de estilo de párrafo
Creación de estilos de párrafo
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()Casos de uso
1. Texto enriquecido de celda
Hay dos formas de configurar texto enriquecido para celdas: setRichTextValueForCell y 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. Comentar texto enriquecido
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. Texto enriquecido de hipervínculo
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)¿Cómo es esta guía?