Page tree
Skip to end of metadata
Go to start of metadata

You can freely arrange and use various features provided by SynapEditor.

Configuration Method

Use "editor.toolbar" key on initialization to configure the toolbar features.

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

[Application result]

Basic Configuration

The basic toolbar configuration 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'
    ],
}

[Application result]

Using Every Features

To use every features provided by SynapEditor, remove 'editor.toolbar' setting.

You can preview the features at the Full Features page.

Icons and Actions

As for keys, icons, and descriptions of each function, please refer to the below.

TOOLBAR KEYICONACTION
new

Creates a new document; the current contents will be discarded.
open

Imports an MS Word / LibreOffice document.
print

Prints the current document.
pageBreak

Inserts page break.
template

Opens Templates dialogue box.
autoSave

Opens auto-saved document list.
undo

Undoes the last command.
redo

Redoes the last undone command.
paragraphStyle

Sets paragraph style (P, H1 ~ H6).
paragraphStyleWithText

Shows drop-down menu for paragraph styles.
fontFamily

Sets font family.
fontFamilyWithText

Shows drop-down menu for font family.
fontSize

Sets font size.
fontSizeWithText

Shows drop-down menu for font size.
customParagraphStyle

Shows predefined custom paragraph styles.
customRunStyle

Shows predefined custom text styles.
growFont

Grows font size.
shrinkFont

Shrinks font size.
bold

Sets as boldface.
italic

Sets as italic.
underline

Sets as underlined.
strike

Sets as strikethrough.
superScript

Sets as superscript.
subScript

Sets as subscript.
fontColor

Set text color.
fontBackgroundColor

Set text background color.
align

>

Set text alignment.
copy

Copy the current block.
cut

Cut the current block.
paste

Paste the copied contents into the current position.
copyRunStyle

Copy text style only.
pasteRunStyle

Paste text style to the current block.
removeRunStyle

Clear text formatting from the current block.
link

Insert link to the current block.
unlink

Remove the selected link.
table

Insert table.
image

Insert image.
background

Set background image/color for the whole document.
video

Insert video.
file

Insert file.
horizontalLine

Insert horizontal line.
shapeEditor

Insert shape.
specialCharacter

Insert special character.
emoji

Insert emoji character.
div

Insert a <div> layer.
drawDiv

Insert a <div> layer by mouse dragging.
quote

Insert quote.
bulletList

Set the current block as bulleted (unordered) list.
numberedList

Set the current block as numbered (ordered) list.
multiLevelList

Set the current block as multi-level list.
increaseIndent

Increase indentation level for the current paragraph.
decreaseIndent

Decrease indentation level for the current paragraph.
lineHeight

Set line spacing for the current paragraph.
lineHeightWithText

Show drop-down menu for line spacing.
paragraphProperties

Open dialogue box for paragraph properties.
fullScreen

View full screen.
source

View source code.
preview

Change to preview mode.
ruler

Show ruler.
divOutline

Show/hide guiding box of layers.
accessibility

Open dialogue box for web accessibility check.
personalDataProtection

Open dialogue box for personal data protection.
find

Open dialogue box for find/replace.

|Horizontal dividing line

-Vertical dividing line
  • No labels