Style menu

If your site has set looks such as a lead paragraph or a notice box, list them in styles. Writers pick a name instead of fiddling with colors and sizes, and the saved HTML carries your site's classes.

createEditor('#editor', {
  toolbar: 'styles | bold | bulletList',
  styles: [
    { title: 'Lead', block: 'p', className: 'lead' },
    { title: 'Subheading', block: 'h3', className: 'sub' },
    { title: 'Notice box', block: 'p', className: 'box' },
    { title: 'Highlighter', inline: 'mark', className: 'hl' },
    { title: 'Muted', inline: 'span', style: 'color: #868e96' },
  ],
  contentStyle: `
    .lead { font-size: 1.15em; color: #495057; }
    .sub { padding-left: 10px; border-left: 4px solid #2f6fed; }
    .box { padding: 12px 16px; background: #f1f3f5; border-radius: 8px; }
    .hl { background: #fff3bf; }
  `,
});

Entries

Each entry in styles takes these fields. Give it a className or a style so the menu can tell where it is applied.

• title the name in the menu
• block a paragraph style: the paragraph becomes this tag and gets the class ('p', 'h2', 'h3'…).
• inline a text style: the selected text is wrapped in this tag ('span', 'mark', 'small'…). Nothing happens without a selection.
• className one class: letters, digits, - and _, up to 40 characters.
• style inline CSS instead of a class, written as property: value pairs joined with ; , e.g. 'color: #868e96'.

Leave out both block and inline to just add the class to the current paragraph, list item, heading or quote.

On and off

Picking the same entry where it is already applied removes it. The menu button shows the style at the caret and the menu checks it. Entries with a style are previewed in that style.

Toolbar and presets

• The toolbar item is styles. It is in the ⋯ menu of the full preset; board doesn't have it, so add it to your toolbar string.
• With an empty styles option the button never shows, even if listed.

Classes and the sanitizer

82editor normally strips every class that arrives through paste or setHTML. Classes named in styles are the exception, so pasted content using the same class names keeps them too.

The editor doesn't know what your classes look like. To see them while writing, add the same CSS to contentStyle, as the demo does.

Saved HTML

<p class="lead">A paragraph with the Lead style.</p>
<h3 class="sub">Subheading</h3>
<p>Select a few words and pick <mark class="hl">Highlighter</mark>…</p>
<p><span style="color: #868e96">Muted text</span></p>

Options