사이냅에디터에서 제공하는 다양한 기능들을 자유롭게 배치하고 사용 할 수 있습니다.
You can freely arrange and use various functions provided by SynapEditor
Configuration method 설정방법
Use "editor.toolbar" key on initialization to configure the functionality of the toolbar.
synapeditor.config.js
{
'editor.toolbar': [
'new','open','|',
'paragraphStyleWithText', '|',
'fontFamilyWithText', '|',
'fontSizeWithText', '|',
'bold', 'italic', 'underline', 'strike', '|',
'fontColor', 'fontBackgroundColor'
]
}
[Application result]
Basic configuration기본설정
The basic toolbar setup is as below.
기본 제공되는 툴바 설정은 아래와 같습니다.
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]
Use full functionality
If you want to use full functionality provided by Synap Editor, remove 'editor.toolbar' configuration.
사이냅에디터에서 제공하는 모든 기능을 사용하시려면 'editor.toolbar' 설정을 제거하면 됩니다.
You can check the page of full functionality in advance.
전체기능 페이지에서 미리 확인 할 수 있습니다.
Icon and Action 아이콘 및 기능설명
Please check below for key, icon, and action of each function.
각 기능에 대한 KEY, ICON, 설명을 아래를 참고하세요.
| TOOLBAR KEY | ICON | ACTION |
|---|---|---|
| new |
| Create a new document; existing content will be destroyed. |
| open |
| Import an MS Word / LibreOffice document. |
| Print current document. | |
| pageBreak |
| Insert page break. |
| template |
| Open Templates dialogue box. |
| autoSave |
| Open auto-saved document list. |
| undo |
| Undo last command. |
| redo |
| Redo last command. |
paragraphStyle |
| Set paragraph style (P, H1 ~ H6). |
paragraphStyleWithText |
| Show drop-down menu for paragraph styles. |
fontFamily |
| Set font family. |
fontFamilyWithText |
| Show drop-down menu for font families. |
fontSize |
| Set font size. |
fontSizeWithText |
| Show drop-down menu for font sizes. |
| customParagraphStyle |
| Show predefined custom paragraph styles. |
| customRunStyle |
| Show predefined custom text styles. |
| growFont |
| Larger font size. |
| shrinkFont |
| Smaller font size. |
| bold |
| Set as boldface. |
| italic |
| Set as italic. |
| underline |
| Set as underlined. |
| strike |
| Set as strikethrough. |
| superScript |
| Set as superscript. |
| subScript |
| Set as subscript. |
| fontColor |
| Set text color. |
| fontBackgroundColor |
| Set text background color. |
| align |
| Set text alignment. |
| copy |
| Copy current selection. |
| cut |
| Cut current selection. |
| paste |
| Paste into current position. |
| copyRunStyle |
| Copy text style only. |
| pasteRunStyle |
| Paste text style to current selection. |
| removeRunStyle |
| Clear text formatting from current selection. |
| link |
| Insert link to current selection. |
| unlink |
| Delete current 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. |
| 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 current selection as bulleted (unordered) list. |
| numberedList |
| Set current selection as numbered (ordered) list. |
| multiLevelList |
| Set current selection as multi-level list. |
| increaseIndent |
| Increase indentation level for current paragraph. |
| decreaseIndent |
| Decrease indentation level for current paragraph. |
| lineHeight |
| Set line spacing for 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 |
