Bold, italic, underline

The basic text format buttons. Select text and press one, or press it first and keep typing. Press again to turn it off.

createEditor('#editor', {
  toolbar: 'bold italic underline strike | subscript superscript code',
});

Buttons and shortcuts

On macOS use ⌘. Buttons show as pressed when the caret is inside that format. Pressing code inside inline code removes it.

Markdown-style typing works too: **bold**, *italic*, ~~strike~~, `code` (Markdown input).

Presets and the selection toolbar

• board (default): bold, underline, strikethrough on the first row; italic and sub/superscript under ⋯ more. No inline code.
• full: bold, italic, underline, strikethrough on the first row; sub/superscript and inline code under more
• basic: bold, italic, underline, strikethrough. minimal: bold, italic, underline
• On phones only bold is on the main row; the rest is under ⋯.

The toolbar that pops up over a selection (bubble toolbar) also has bold, italic, underline, strikethrough and inline code, even when the main toolbar doesn't.

Saved HTML

Browser-made <b>, <i> and <strike> are saved as <strong>, <em> and <s>.

<p><strong>Bold</strong>, <em>italic</em>, <u>underline</u>, <s>strikethrough</s>, H<sub>2</sub>O, <code>npm install</code></p>

API

editor.exec('bold');
editor.queryState('bold'); // true when the caret is in bold text

Options