Bookmarks and contents

For links that jump to a place in a long post. A bookmark is an id on a block; a table of contents is a list of links to the headings’ bookmarks.

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

Adding a bookmark

• Put the caret in a block and press anchor. The name field is filled with a name made from the block’s text.
• Names keep letters (Korean too), digits, - and _; spaces and symbols become -. A name already in use gets -2, -3….
• Apply an empty name to remove the bookmark.
• Blocks that take a bookmark: headings, paragraphs, list items, quotes, callouts, figures, tables, collapsible sections.
• While editing, bookmarked blocks show a faint # to their left.

Linking to a bookmark

• The address field of the link dialog (Ctrl+K) suggests the post’s bookmarks as #name.
• Ctrl+click (⌘+click on a Mac) on a # link while editing scrolls to it inside the editor. So does the link bar’s "Open" button.

Table of contents

The toc button builds a list from the post’s headings (H1–H4) and inserts it at the caret. Headings without a bookmark get one from their text. Lower levels are indented 20px each. With no headings nothing is inserted. It is also in the / menu.

Saved HTML

<nav data-toc=""><p><strong>Contents</strong></p><ul>
  <li><a href="#install">Install</a></li>
  <li style="margin-left: 20px"><a href="#cdn">CDN</a></li>
</ul></nav>
<h2 id="install">Install</h2>

Ids survive the sanitizer, Korean ones included. The list title is the UI string tocTitle; change it with the locale option.

createEditor('#editor', {
  locale: { tocTitle: 'In this post' },
});

editor.exec('anchor'); // open the bookmark dialog
editor.exec('toc');    // insert a table of contents

Presets

anchor and toc are under ⋯ in the board and full presets.

Options