Toolbar
Presets, ordering and custom buttons.
Presets
| Name | For |
|---|---|
'minimal' | Comments: bold, italic, link, lists |
'basic' | Simple posts: headings, formatting, lists, links, images |
'board' | Default for boards: fonts, sizes, colors, alignment, line height, tables, images, video |
'full' | Everything: special characters, emoji, find, source, accessibility check, templates… |
Pick your own
Same string format as TinyMCE; | is a separator. An array of arrays works too, one group per array.
createEditor('#editor', {
toolbar: 'undo redo | heading fontSize | bold italic underline color | alignMenu | bulletList orderedList | link image table | more | findReplace source',
});| Group | Names |
|---|---|
| History | undo redo |
| Paragraph | heading fontFamily fontSize lineHeight |
| Text | bold italic underline strike subscript superscript code color highlight clearFormat caseChange formatPainter |
| Align and lists | alignMenu alignLeft alignCenter alignRight alignJustify bulletList orderedList checklist listStyle indent outdent |
| Insert | link image video table hr pageBreak blockquote codeBlock specialChars emoji template toc datetime |
| Tools | findReplace source preview print fullscreen a11y help |
| Separators | | starts a group; items after more go into the ⋯ menu |
Add your own button
editor.addButton('signature', {
icon: '<svg viewBox="0 0 20 20"><path d="M3 15c3-6 5-6 6-2s3 3 8-4" fill="none" stroke="currentColor" stroke-width="1.6"/></svg>',
title: 'Insert signature',
onAction: (ed) => ed.insertHTML('<p>The support team</p>'),
});
// put 'signature' in the toolbar string to place it