Callouts

For notes, tips and warnings that should stand apart from the text. Wraps paragraphs in a colored box with an icon.

createEditor('#editor', {
  toolbar: 'heading | bold | callout | undo redo',
});

How to use

• Pick a kind from the callout menu: the paragraph at the caret (or the selected paragraphs) goes into a box with an icon in front. On an empty line you type right after the icon.
• With the caret in a box, a bar shows above its right end. Another kind changes the color and icon; the trash button removes the box and keeps the text.
• Picking the same kind again, or Backspace at the very start of the box, also removes it.
• On an empty line, type / and pick "Callout" for an info box.
• A box can hold lists, tables and other blocks, and can sit inside a collapsible section.

Kinds

Saved HTML

The look is stored as inline styles, so the box shows the same on a page without CSS and in e-mail. The icon is plain text at the start of the first paragraph.

<div data-callout="tip" style="background-color: #fff9db; border-left: 4px solid #fcc419; border-radius: 8px; padding: 12px 16px; margin: 0.8em 0">
  <p>💡 Landscape photos show larger.</p>
</div>

editor.exec('callout', 'warning'); // add a box or change its kind
editor.exec('callout', '');        // remove the box

Presets

Under ⋯ in the board and full presets.

Options