editor

Docs › Blocks

Templates

Insert ready-made content from a menu.

If posts often start from the same layout (notices, support replies, meeting notes), register them in the templates option and insert them from a menu.

Try it

Code for this demo

createEditor('#editor', {
  toolbar: 'heading | bold | template | undo redo',
  templates: [
    {
      title: 'Notice',
      description: 'Title, date, contact',
      html: '<h2>Notice title</h2><p><strong>Date:</strong> </p><p><strong>Contact:</strong> </p>',
    },
    {
      title: 'Meeting notes',
      description: 'Attendees, agenda, decisions',
      html: '<h3>Attendees</h3><ul><li></li></ul><h3>Agenda</h3><ol><li></li></ol><h3>Decisions</h3><p></p>',
    },
  ],
});

How to use

  • The template button lists your templates; description shows small next to the title.
  • The template’s HTML is inserted at the caret. It does not replace the post.
  • With slashMenu on, templates are in the / menu too, searchable by title and description.
  • With no templates, the menu shows only a "no matches" line.

From code

To insert a layout at a moment of your choosing, call insertHTML. To replace the whole post, setHTML.

editor.insertHTML('<h2>Notice title</h2><p></p>');  // at the caret (sanitized)
editor.setHTML('<h2>Notice title</h2><p></p>');     // replace everything

Presets

template is only in the full preset, under ⋯. With board, add it to toolbar yourself.

Options

NameTypeDefaultDescription
templates{ title, html, description? }[]-Templates shown in the menu
templatetoolbar item-Open the template menu
slashMenubooleantrueList templates in the / menu too