사이냅에디터에서 제공하는 다양한 기능들을 자유롭게 배치하고 사용 할 수 있습니다.
설정방법
'editor.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, 설명을 아래를 참고하세요.
| 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 |
| 찾기/바꾸기 |
| | | 가로 나눔선 | |
| - | 세로 나눔선 |
