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 KEY | ICON | ACTION |
|---|---|---|
| new |
| Creates a new document; the current contents will be discarded. |
| open |
| Imports an MS Word / LibreOffice document. |
| 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 |
