사이냅에디터에서 제공하는 다양한 기능들을 자유롭게 배치하고 사용 할 수 있습니다.
설정방법
'editor.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, 설명을 아래를 참고하세요.
| 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 |
| 가로줄 삽입 | ||||||||
| shapeEditor |
| 도형삽입 | ||||||||
| specialCharacter |
| 특수문자 삽입 | ||||||||
| emoji |
| 이모지 삽입 | ||||||||
| div |
| 레이어 삽입 | ||||||||
| drawDiv |
| 레이어 그리기 | ||||||||
| quote |
| 인용문구 삽입 | ||||||||
| bulletList |
| 글머리 기호 | ||||||||
| numberedList |
| 글머리 번호 | ||||||||
| multiLevelList |
| 다단계 글머리 | ||||||||
| increaseIndent |
| 들여쓰기 | ||||||||
| decreaseIndent |
| 내어쓰기 | ||||||||
| lineHeight |
| 줄간격 | ||||||||
| lineHeightWithText |
| 줄간격 버튼 | ||||||||
| paragraphProperties |
| 문단 상세속성 편집 | ||||||||
| fullScreen |
| 전체화면 | ||||||||
| source |
| 소스보기 | ||||||||
| preview |
| 미리보기 | ||||||||
| ruler |
| 줄자 | ||||||||
| 레이어 외각선 보이기/감추기 | |||||||||
guide |
| 도형, 레이어 편집가이드 보이기/감추기 | ||||||||
| find |
| 찾기/바꾸기 | ||||||||
| | | 가로 나눔선 | |||||||||
| - | 세로 나눔선 |
