사이냅에디터에서 제공하는 다양한 기능들을 자유롭게 배치하고 사용 할 수 있습니다.
설정방법
'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 |
| 템플릿 다이얼로그 |
| layout |
| 레이아웃 |
| autoSave |
| 자동저장된 문서목록 |
| undo |
| 실행취소 |
| redo |
| 재실행 |
paragraphStyle |
| 문단스타일 (P, H1 ~ H6) |
paragraphStyleWithText |
| 문단스타일 지정버튼 드롭다운 |
fontFamily |
| 글꼴을 설정 |
fontFamilyWithText |
| 글꼴설정 |
...
| 드롭다운 | ||
| fontFamilyWithTextField |
| 글꼴 설정 드롭다운 (글꼴 입력 가능) |
fontSize |
...
|
...
| 글자 크기를 설정 | |
fontSizeWithText |
|
...
| 글자 크기 드롭다운 | ||
| fontSizeWithTextField |
| 글자 크기 드롭다운 (크기 입력 가능) |
| 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 |
|
...
서식 지우기(텍스트에 적용된 서식을 제거합니다) | ||||||||
removeStyle
|
| 전체 서식 지우기(서식 지우기 기능을 포함하여, 문단 및 문단이 포함되는 영역에 설정된 서식까지 제거합니다) | ||||||
| link |
| 링크 | ||||||
| unlink |
| 링크해제 | ||||||
| openLink |
| 링크열기 | ||||||
| bookmark |
| 책갈피 | ||||||
| table |
| 표 삽입 | ||||||
| image |
| 이미지 삽입 | ||||||
| background |
| 문서 배경 이미지 및 색 지정 | ||||||
| video |
| 동영상 삽입 | ||||||
| file |
| 파일 삽입 | ||||||
| horizontalLine |
| 가로줄 삽입 |
...
...
...
...
| div |
| 레이어 삽입 |
...
| drawAbsolutePositionDiv |
| 레이어 그리기 | ||||||||
| quote |
| 인용문구 삽입 | ||||||||
| bulletList |
| 글머리 기호 | ||||||||
| numberedList |
| 글머리 번호 | ||||||||
| multiLevelList |
| 다단계 글머리 | ||||||||
| increaseIndent |
| 들여쓰기 | ||||||||
| decreaseIndent |
| 내어쓰기 | ||||||||
| lineHeight |
| 줄간격 | ||||||||
| lineHeightWithText |
| 줄간격 버튼 | ||||||||
| paragraphProperties |
| 문단 상세속성 편집 | ||||||||
| fullScreen |
| 전체화면 | ||||||||
| source |
| 소스보기 | ||||||||
| preview |
| 미리보기 | ||||||||
| ruler |
| 줄자 | ||||||||
| 레이어 외각선 보이기/감추기 | |||||||||
guide |
| 도형, 레이어 편집가이드 보이기/감추기 | ||||||||
| find |
| 찾기/바꾸기 | ||||||||
| conversion |
| 변환 (대문자로 변환, 소문자로 변환, 각 단어의 첫글자를 대문자로 변환, 대소문자 전환) | ||||||||
| help |
| 도움말 | ||||||||
| about |
| 사이냅에디터 정보 | ||||||||
| selectionMode |
| 도형 선택 모드 | ||||||||
| responsive |
| 반응형 보기 | ||||||||
| contentsProperties |
| 편집 영역 속성 | ||||||||
| | | 가로 나눔선 | |||||||||
| - | 세로 나눔선 |
플러그인
| KEY | ICON | 설명 |
|---|---|---|
| specialCharacter |
| 특수문자 삽입 |
| emoji |
| 이모지 삽입 |
| shapeEditor |
| 도형삽입 |
| tuiImageEditor |
| 이미지 에디터 |
| WebAccessibilityChecker |
| 웹 접근성 도구 |
| personalDataProtection |
| 개인정보 보호 |
| webSpellChecker |
| 맞춤법 검사 |
