사이냅에디터에서 제공하는 다양한 기능들을 자유롭게 배치하고 사용 할 수 있습니다.
설정방법
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' ] }
[적용결과]
기본설정
기본 제공되는 툴바 설정은 아래와 같습니다.
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' ], }
[적용결과]
전체기능사용
사이냅에디터에서 제공하는 모든 기능을 사용하시려면 'editor.toolbar' 설정을 제거하면 됩니다.
전체기능 페이지에서 미리 확인 할 수 있습니다.
아이콘 및 기능설명
각 기능에 대한 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 |