Toolbar Settings

You can freely arrange and use the various features provided by Synap Editor.

Setup Method

Configure the toolbar using the editor.toolbar key, as shown below.

// synapeditor.config.js
{
  'editor.toolbar': [
    'new', 'open', '|',
    'paragraphStyleWithText', '|',
    'fontFamilyWithText', '|',
    'fontSizeWithText', '|',
    'bold', 'italic', 'underline', 'strike', '|',
    'fontColor', 'fontBackgroundColor'
  ]
}

[Result]

Default Settings

The default toolbar setting is as follows.

// synapeditor.config.js
{
  'editor.toolbar': [
    'new', 'open', 'template', 'layout', '|',
    'undo', 'redo', '|',
    'copy', 'cut', 'paste', '|',
    'link', 'unlink', 'bookmark', '|',
    'image', 'background', 'video', 'file', '|',
    'table', 'div', 'horizontalLine', 'quote', '|',
    'specialCharacter', 'emoji', '-',
    'paragraphStyleWithText', '|',
    'fontFamilyWithText', '|',
    'fontSizeWithText', '|',
    'bold', 'italic', 'underline', 'strike', '|',
    'growFont', 'shrinkFont', '|',
    'fontColor', 'fontBackgroundColor', '|',
    'bulletList', 'numberedList', 'multiLevelList', '|',
    'align', '|',
    'lineHeight', '|',
    'decreaseIndent', 'increaseIndent'
  ],
}

[Result]

Using All Features

To use every feature provided by Synap Editor, simply remove the editor.toolbar setting.

You can preview every feature on the All Features page.

Icon and Function List

Refer to the table below for the KEY, ICON, and description of each feature.

KEY	ICON	Description
new		Clears all editing content and starts a new document
open		Imports a document
print		Print
pageBreak		Page-break marker used when printing
template		Template dialog
layout		Layout
autoSave		List of auto-saved documents
undo		Undo
redo		Redo
paragraphStyle		Paragraph style (P, H1–H6)
paragraphStyleWithText		Paragraph style dropdown
fontFamily		Sets the font
fontFamilyWithText		Font selection dropdown
fontFamilyWithTextField		Font dropdown with input field
fontSize		Sets the font size
fontSizeWithText		Font size dropdown
fontSizeWithTextField		Font size dropdown with input field
customParagraphStyle		Shows user-defined paragraph styles. The user-defined paragraph styles must be set in the config.
customRunStyle		Shows user-defined character (run) styles. The user-defined run styles must be set in the config.
growFont		Increase font size by one step
shrinkFont		Decrease font size by one step
bold		Bold
italic		Italic
underline		Underline
strike		Strikethrough
superScript		Superscript
subScript		Subscript
fontColor		Font color
fontBackgroundColor		Font background color
align		Paragraph alignment (dropdown: left, center, right, justify)
alignLeft		Align left
alignCenter		Align center
alignRight		Align right
alignJustify		Justify
copy		Copy
cut		Cut
paste		Paste
copyRunStyle		Copy formatting
pasteRunStyle		Paste formatting
removeRunStyle		Clear formatting (removes formatting applied to text)
removeStyle (Release 2.17.0+)		Clear all formatting (includes paragraph- and container-level formatting in addition to text formatting)
link		Insert link
unlink		Remove link
openLink		Open link
bookmark		Bookmark
table		Insert table
image		Insert image
background		Set background image / color of the document
video		Insert video
file		Insert file
horizontalLine		Insert horizontal line
div		Insert layer (div)
drawAbsolutePositionDiv		Draw layer
quote		Insert quote
bulletList		Bullet list
numberedList		Numbered list
multiLevelList		Multilevel list
increaseIndent		Increase indent
decreaseIndent		Decrease indent
lineHeight		Line height
lineHeightWithText		Line height button
paragraphProperties		Edit paragraph detail properties
fullScreen		Full-screen mode
source		Source view
preview		Preview
ruler		Ruler
divGuide (deprecated)		Show/hide layer outline
guide (2.9.0+)		Show/hide editing guides for shapes and layers
find		Find and replace
conversion		Conversion (uppercase, lowercase, title case, toggle case)
help		Help
about		About Synap Editor
selectionMode		Shape selection mode
responsive		Responsive view
contentsProperties		Edit area properties
|	—	Horizontal separator
-	—	Vertical separator
codeBlock (Release 3.3.0+)		Code block
conditionalFormatting (Release 3.3.0+)		Conditional formatting
export (Release 3.3.2602+)		Export
showMemo (Release 3.3.0+)		Comments

Plugins

KEY	ICON	Description
specialCharacter		Insert special character
emoji		Insert emoji
shapeEditor		Insert shape
tuiImageEditor		Image editor
WebAccessibilityChecker		Web accessibility tool
personalDataProtection		Personal data protection
webSpellChecker		Spell checker

Related Information

• Button & Icon Size Settings
• Fixed Toolbar Area
• Inline mode