Formatting commands control the appearance of text in the editor.
executeFont
Sets the font family for selected text or at cursor position.
editor.command.executeFont(fontFamily: string, options?: IRichtextOption): void
Parameters
Font family name (e.g., ‘Arial’, ‘Times New Roman’)
Options:
isIgnoreDisabledRule?: boolean - Bypass disabled/readonly checks
Example
editor.command.executeFont('Arial')
editor.command.executeFont('Times New Roman', { isIgnoreDisabledRule: false })
executeSize
Sets the font size for selected text or at cursor position.
editor.command.executeSize(size: number, options?: IRichtextOption): void
Parameters
Font size in pixels (must be within minSize and maxSize limits)
Example
editor.command.executeSize(18)
editor.command.executeSize(24)
executeSizeAdd
Increases font size by 2 pixels.
editor.command.executeSizeAdd(options?: IRichtextOption): void
Example
editor.command.executeSizeAdd()
executeSizeMinus
Decreases font size by 2 pixels.
editor.command.executeSizeMinus(options?: IRichtextOption): void
Example
editor.command.executeSizeMinus()
executeBold
Toggles bold formatting for selected text.
editor.command.executeBold(options?: IRichtextOption): void
Example
editor.command.executeBold()
Notes
- Toggles bold on/off based on current state
- If selection has mixed bold states, applies bold to all
executeItalic
Toggles italic formatting for selected text.
editor.command.executeItalic(options?: IRichtextOption): void
Example
editor.command.executeItalic()
executeUnderline
Toggles underline formatting with optional text decoration.
editor.command.executeUnderline(
textDecoration?: ITextDecoration,
options?: IRichtextOption
): void
Parameters
Advanced underline styling:{
style?: TextDecorationStyle // solid, dashed, dotted, etc.
color?: string // underline color
}
Example
// Simple underline
editor.command.executeUnderline()
// Styled underline
editor.command.executeUnderline({
style: TextDecorationStyle.DASHED,
color: '#FF0000'
})
executeStrikeout
Toggles strikethrough formatting.
editor.command.executeStrikeout(options?: IRichtextOption): void
Example
editor.command.executeStrikeout()
executeSuperscript
Toggles superscript formatting (e.g., x²).
editor.command.executeSuperscript(options?: IRichtextOption): void
Example
// Select "2" and make it superscript
editor.command.executeSuperscript()
Notes
- Automatically removes subscript if applied
- Can only be applied to text elements
executeSubscript
Toggles subscript formatting (e.g., H₂O).
editor.command.executeSubscript(options?: IRichtextOption): void
Example
// Select "2" and make it subscript
editor.command.executeSubscript()
executeColor
Sets text color.
editor.command.executeColor(
color: string | null,
options?: IRichtextOption
): void
Parameters
Hex color code (e.g., ‘#FF0000’) or null to remove color
Example
// Set red color
editor.command.executeColor('#FF0000')
// Remove custom color (use default)
editor.command.executeColor(null)
executeHighlight
Sets text background highlight color.
editor.command.executeHighlight(
color: string | null,
options?: IRichtextOption
): void
Parameters
Hex color code for highlight or null to remove
Example
// Yellow highlight
editor.command.executeHighlight('#FFFF00')
// Remove highlight
editor.command.executeHighlight(null)
executeTitle
Applies or removes heading level formatting.
editor.command.executeTitle(level: TitleLevel | null): void
Parameters
level
TitleLevel | null
required
Heading level:
TitleLevel.FIRST - H1TitleLevel.SECOND - H2TitleLevel.THIRD - H3TitleLevel.FOURTH - H4TitleLevel.FIFTH - H5TitleLevel.SIXTH - H6null - Remove heading
Example
import { TitleLevel } from '@hufe921/canvas-editor'
// Apply H1
editor.command.executeTitle(TitleLevel.FIRST)
// Apply H2
editor.command.executeTitle(TitleLevel.SECOND)
// Remove heading
editor.command.executeTitle(null)
executeList
Applies list formatting to selected paragraphs.
editor.command.executeList(listType: ListType | null, listStyle?: ListStyle): void
Parameters
List type:
ListType.UL - Unordered list (bullets)ListType.OL - Ordered list (numbers)null - Remove list
List marker style:
- For unordered:
DISC, CIRCLE, SQUARE
- For ordered:
DECIMAL, DECIMAL_LEADING_ZERO, LOWER_ROMAN, UPPER_ROMAN, LOWER_ALPHA, UPPER_ALPHA
Example
import { ListType, ListStyle } from '@hufe921/canvas-editor'
// Bullet list
editor.command.executeList(ListType.UL, ListStyle.DISC)
// Numbered list
editor.command.executeList(ListType.OL, ListStyle.DECIMAL)
// Remove list
editor.command.executeList(null)
editor.command.executeFormat(options?: IRichtextOption): void
Example
// Clear all formatting
editor.command.executeFormat()
Notes
- Removes font, size, bold, italic, underline, color, highlight, etc.
- Preserves text content
Complete Example
import Editor, { TitleLevel, ListType, ListStyle } from '@hufe921/canvas-editor'
const editor = new Editor(container, data)
// Apply heading 1
editor.command.executeSetRange(0, 10)
editor.command.executeTitle(TitleLevel.FIRST)
// Format text as bold, red, 20px
editor.command.executeSetRange(20, 40)
editor.command.executeBold()
editor.command.executeColor('#FF0000')
editor.command.executeSize(20)
// Create bullet list
editor.command.executeSetRange(50, 100)
editor.command.executeList(ListType.UL, ListStyle.DISC)
// Clear formatting
editor.command.executeFormat()