Guide d’utilisation du texte enrichi
Univer propose de puissantes fonctionnalités de texte enrichi utilisables dans différents contextes, notamment le contenu des cellules, les commentaires et les liens hypertextes. Ce guide présente leur utilisation.
API Facade
L’API Facade fournit un ensemble de méthodes permettant de créer des objets liés au texte enrichi :
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()Chaque méthode de création possède une version Builder et une version Value :
- Les versions Builder (comme
newRichText) servent à créer et à modifier des styles - Les versions Value (comme
newRichTextValue) servent à créer des objets de style en lecture seule
Concepts de base
Le système de texte enrichi repose principalement sur deux composants :
- TextStyle (style de texte) : contrôle l’apparence du texte, notamment la police, la taille et la couleur.
- ParagraphStyle (style de paragraphe) : contrôle la mise en forme des paragraphes, notamment l’alignement, le retrait et l’interligne.
Paramètres du style de texte
Créer des styles de texte
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()Décorations de texte
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()Paramètres du style de paragraphe
Créer des styles de paragraphe
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()Cas d’utilisation
1. Texte enrichi dans une cellule
Il existe deux méthodes pour définir le texte enrichi des cellules : setRichTextValueForCell et 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. Texte enrichi dans un commentaire
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. Texte enrichi contenant un lien hypertexte
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)Que pensez-vous de ce guide ?