Slash menu

Type / on an empty line to get a list of blocks to insert. Handy when you would rather stay on the keyboard than reach for the toolbar.

createEditor('#editor', {
  toolbar: 'heading | bold italic | bulletList orderedList',
  templates: [
    {
      title: 'Meeting notes',
      description: 'date, people, agenda',
      html: '<h2>Meeting notes</h2><p>Date: </p><p>People: </p><ul><li>Agenda</li></ul>',
    },
  ],
});

How it works

• The menu opens when the paragraph holds only /. A slash in the middle of text is just a slash.
• Keep typing to filter by name, English or Korean keywords (/youtube → video, /spoiler → fold) and Korean initial consonants.
• ↑ ↓ to move, Enter or Tab to insert, Esc to close.
• The typed /text is removed and the block goes in its place.
• The menu closes when more than 24 characters follow the slash or the slash is deleted.

What is in it

Paragraph, headings 1-4, bulleted list, numbered list, checklist, quote, callout, fold (details), code block, table (3×3), image, video, divider, page break, emoji, special characters, table of contents, date and time. With the templates option, templates are added at the end (their descriptions are searched too).

Items show up here even when they are not on the toolbar, so a short toolbar plus the slash menu works well.

Options