사이냅에디터에서 제공하는 다양한 기능들을 자유롭게 배치하고 사용 할 수 있습니다.
설정방법
'Use "editor.toolbar'키를 이용해서 아래와 같이 설정합니다toolbar" key on initialization to configure the functionality of the toolbar.
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
{
'editor.toolbar': [
'new','open','|',
'paragraphStyleWithText', '|',
'fontFamilyWithText', '|',
'fontSizeWithText', '|',
'bold', 'italic', 'underline', 'strike', '|',
'fontColor', 'fontBackgroundColor'
]
} |
[적용결과]
기본설정
기본 제공되는 툴바 설정은 아래와 같습니다.
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
{
'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. |
| KEY | ICON | 설명 |
|---|---|---|
| new |
| 편집중인 내용을 모두 지우고 새문서 |
| open |
| 문서를 임포트 |
| 인쇄 | |
| pageBreak |
| 인쇄시 사용되는 페이지 구분자 |
| template |
| 템플릿 다이얼로그 |
| autoSave |
| 자동저장된 문서목록 |
| undo |
| 실행취소 |
| redo |
| 재실행 |
paragraphStyle |
| 문단스타일 (P, H1 ~ H6) |
paragraphStyleWithText |
| 문단스타일 지정버튼 드롭다운 |
fontFamily |
| 글꼴을 설정 |
fontFamilyWithText |
| 글꼴설정 버튼 드롭다운 |
fontSize |
| 글자크기 |
fontSizeWithText |
| 글자크기 드롭다운 |
| customParagraphStyle |
| 사용자정의 문단스타일을 보여줍니다. 사용자정의 문단스타일은 config에 설정해야합니다. |
| customRunStyle |
| 사용자정의 글자스타일을 보여줍니다. 사용자정의 글자스타일은 config에 설정해야합니다. |
| growFont |
| 글자크기 한단계 키움 |
| shrinkFont |
| 글자크기 한단계 줄임 |
| bold |
| 굵게 |
| italic |
| 기울임 |
| underline |
| 밑줄 |
| strike |
| 취소선 |
| superScript |
| 위첨자 |
| subScript |
| 아래첨자 |
| fontColor |
| 글자색 |
| fontBackgroundColor |
| 글자배경색 |
align |
| 문단정렬 (드롭다운: left, center, right, justify) |
alignLeft alignCenter alignRight alignJustify |
| 왼쪽정렬 중앙정렬 오른쪽정렬 양쪽정렬 |
| copy |
| 복사 |
| cut |
| 잘라내기 |
| paste |
| 붙여넣기 |
| copyRunStyle |
| 서식복사 |
| pasteRunStyle |
| 서식붙여넣기 |
| removeRunStyle |
| 서식지우기 |
| link |
| 링크 |
| unlink |
| 링크해제 |
| table |
| 표 삽입 |
| image |
| 이미지 삽입 |
| background |
| 문서 배경 이미지 및 색 지정 |
| video |
| 동영상 삽입 |
| file |
| 파일 삽입 |
| horizontalLine |
| 가로줄 삽입 |
| specialCharacter |
| 특수문자 삽입 |
| emoji |
| 이모지 삽입 |
| div |
| 레이어 삽입 |
| drawDiv |
| 레이어 그리기 |
| quote |
| 인용문구 삽입 |
| bulletList |
| 글머리 기호 |
| numberedList |
| 글머리 번호 |
| multiLevelList |
| 다단계 글머리 |
| increaseIndent |
| 들여쓰기 |
| decreaseIndent |
| 내어쓰기 |
| lineHeight |
| 줄간격 |
| lineHeightWithText |
| 줄간격 버튼 |
| paragraphProperties |
| 문단 상세속성 편집 |
| fullScreen |
| 전체화면 |
| source |
| 소스보기 |
| preview |
| 미리보기 |
| ruler |
| 줄자 |
| divGuide |
| 레이어 외각선 보이기/감추기 |
| find |
| 찾기/바꾸기 |
| | | 가로 나눔선 | |
| - | 세로 나눔선 |
