Text Formatting

@erag/text-editor-vue includes rich text formatting tools natively powered by browser Range and Selection manipulation.

---

Formatting Controls & Toolbar Items

Include any of the following formatting keywords in your init.toolbar string:

const editorConfig: EditorInit = {
    toolbar:
        'undo redo | blocks fontfamily fontsize | ' +
        'bold italic underline strikethrough superscript subscript casechange | ' +
        'forecolor backcolor | ' +
        'alignleft aligncenter alignright alignjustify | ' +
        'removeformat',
};

---

Detailed Control List

Toolbar Control	Keyword	Function
Blocks / Headings	blocks	Dropdown menu to convert paragraph into <h1> through <h6>, <p>, <blockquote>, or <pre> code blocks.
Font Family	fontfamily	Select a configured family such as Arial, Georgia, Courier New, Times New Roman, or Verdana.
Font Size	fontsize	Select font sizes (e.g. 8pt to 36pt).
Bold	bold	Toggles <strong> / <b> bold text formatting (Ctrl+B / Cmd+B).
Italic	italic	Toggles <em> / <i> italic text formatting (Ctrl+I / Cmd+I).
Underline	underline	Toggles <u> underline formatting (Ctrl+U / Cmd+U).
Strikethrough	strikethrough	Toggles <del> / <s> strikethrough formatting.
Superscript	superscript	Toggles <sup> superscript text (e.g. x2).
Subscript	subscript	Toggles <sub> subscript text (e.g. H2O).
Change Case	casechange	Dropdown menu offering UPPERCASE, lowercase, and Title Case conversions.
Text Color	forecolor	Color picker dropdown for text foreground color.
Background Color	backcolor	Color picker dropdown for text highlight / background fill color.
Align Left	alignleft	Aligns text paragraph to the left.
Align Center	aligncenter	Centers text paragraph.
Align Right	alignright	Aligns text paragraph to the right.
Justify	alignjustify	Justifies text across full container width.
Remove Formatting	removeformat	Strips inline formatting, styles, and tags from selection.

The Format menubar also provides Inline code and Line height. The current inline-code action changes the selected block to <pre>. Line-height choices come from lineHeightFormats and are applied as an inline line-height style.

const editorConfig: EditorInit = {
    lineHeightFormats: [
        { label: 'Compact', value: '1.2' },
        { label: 'Normal', value: '1.5' },
        { label: 'Relaxed', value: '2' },
    ],
};

Bold, italic, underline, and similar commands can establish the format used for subsequent typing when the caret is collapsed. Change case requires an active text selection. Clear formatting removes formatting from the selection and resets the active block to a paragraph.

The default families are Arial, Book Antiqua, Comic Sans MS, Courier New, Georgia, Helvetica, Impact, Symbol, Tahoma, Terminal, Times New Roman, Trebuchet MS, and Verdana. Default sizes are 8pt, 10pt, 12pt, 14pt, 18pt, 24pt, and 36pt.