TEXT EDIT

Text-related commands executed via editor.execCommand — text input/deletion, text style (bold/italic/underline/strike), font family/size, color, case conversion, run-style copy/paste, and more.

Commands

• command - addRunProperties
• command - addRunStyle
• command - bold
• command - copyRunStyle
• command - decreaseFontSize
• command - deleteLeft
• command - deleteRight
• command - enter
• command - fill
• command - fontName
• command - fontSize
• command - increaseFontSize
• command - insertLineBreak
• command - insertText
• command - italic
• command - lowerCase
• command - pasteRunStyle
• command - removeTextStyle
• command - replaceText
• command - replaceTextByIndex
• command - setTextVertAlign
• command - strike
• command - tab
• command - textFill
• command - titleCase
• command - toggleCase
• command - underline
• command - untab
• command - upperCase

command - addRunProperties

Release 3.2.2507+

Adds className and HTML attributes to the selected text. Properties accumulate on top of existing ones. If an attribute value is null (or empty string), that attribute is removed.

editor.execCommand('addRunProperties', {
  className: 'Butterfly',
  attributes: {
    'title': 'Beautiful butterfly',
    'aria-label': 'Beautiful butterfly'
  }
});

editor.execCommand('addRunProperties', {
  className: 'Beautiful',
  attributes: { 'title': '' }   // empty string removes the attribute
});

command - addRunStyle

Adds a style to the selected text. The style accumulates on top of existing styles.

editor.execCommand('addRunStyle', { fontSize: { value: 20, unit: 'pt' } });           // add font size
editor.execCommand('addRunStyle', { color: { r: 255, g: 0, b: 0 } });                 // add text color
editor.execCommand('addRunStyle', { backgroundColor: { r: 0, g: 0, b: 255 } });       // add background color

command - bold

Bolds the selected text. With only a caret, sets bold for upcoming input.

editor.execCommand('bold');

command - copyRunStyle

Copies the text style at the caret position. Related: command - pasteRunStyle.

editor.execCommand('copyRunStyle');

command - decreaseFontSize

Decreases the font size of the selected text by one step. With only a caret, applies to upcoming input.

editor.execCommand('decreaseFontSize');

command - deleteLeft

Deletes the character to the left of the caret. If a selection exists, removes the selection.

editor.execCommand('deleteLeft');

command - deleteRight

Deletes the character to the right of the caret. If a selection exists, removes the selection.

editor.execCommand('deleteRight');

command - enter

Splits the paragraph at the caret position. If a selection exists, removes the selection first, then splits.

editor.execCommand('enter');

command - fill

Sets the background color of the selected text. With only a caret, applies to upcoming input.

editor.execCommand('fill', '#000000');

command - fontName

Sets the font family of the selected text. With only a caret, applies to upcoming input.

editor.execCommand('fontName', 'Arial');

command - fontSize

Sets the font size of the selected text. With only a caret, applies to upcoming input.

editor.execCommand('fontSize', 12);

command - increaseFontSize

Increases the font size of the selected text by one step. With only a caret, applies to upcoming input.

editor.execCommand('increaseFontSize');

command - insertLineBreak

Inserts a <br> at the caret position. If a selection exists, removes the selection first.

editor.execCommand('insertLineBreak');

command - insertText

Inserts text at the caret position. If a selection exists, removes the selection first.

editor.execCommand('insertText', 'text');

command - italic

Italicizes the selected text. With only a caret, sets italic for upcoming input.

editor.execCommand('italic');

command - lowerCase

Converts letters in the selected text to lowercase.

editor.execCommand('lowerCase');

command - pasteRunStyle

Applies the previously-copied text style to the selected text. Related: command - copyRunStyle.

editor.execCommand('pasteRunStyle');

command - removeTextStyle

Removes the style from the selected text.

editor.execCommand('removeTextStyle');

command - replaceText

Replaces the selected text with the given text.

editor.execCommand('replaceText', 'text');

command - replaceTextByIndex

Replaces text at the positions specified by targets with the given text.

editor.execCommand('replaceTextByIndex', 'text', [
  { id: 'paragraphId1', startIndex: 0, endIndex: 3 },
  { id: 'paragraphId2', startIndex: 5, endIndex: 15 }
]);

command - setTextVertAlign

Sets a superscript or subscript on the selected text. With only a caret, applies to upcoming input.

editor.execCommand('setTextVertAlign', 'superscript');  // superscript
editor.execCommand('setTextVertAlign', 'subscript');    // subscript

command - strike

Strikes through the selected text. With only a caret, sets strike for upcoming input.

editor.execCommand('strike');

command - tab

Inserts a tab at the caret position. If a selection exists, the selection is removed first. Inside a table cell, moves to the next cell. At the start of a paragraph, increases the indent.

editor.execCommand('tab');

command - textFill

Sets the text color of the selected text. With only a caret, applies to upcoming input.

editor.execCommand('textFill', '#000000');

command - titleCase

Capitalizes the first letter of each word in the selected text.

editor.execCommand('titleCase');

command - toggleCase

Toggles the case of letters in the selected text — uppercase becomes lowercase and vice versa.

editor.execCommand('toggleCase');

command - underline

Underlines the selected text. With only a caret, sets underline for upcoming input.

editor.execCommand('underline');

command - untab

Inside a table cell, moves to the previous cell. At the start of a paragraph, decreases the indent.

editor.execCommand('untab');

command - upperCase

Converts letters in the selected text to uppercase.

editor.execCommand('upperCase');