사이냅에디터에서 제공하는 다양한 기능들을 자유롭게 배치하고 사용 할 수 있습니다.
설정방법
'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 |
| 템플릿 다이얼로그 |
| 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 릴리즈 2.17.0 이상 |
| 전체 서식 지우기(서식 지우기 기능을 포함하여, 문단 및 문단이 포함되는 영역에 설정된 서식까지 제거합니다) |
| 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 2.9.0 이상 |
| 도형, 레이어 편집가이드 보이기/감추기 |
| find |
| 찾기/바꾸기 |
| conversion |
| 변환 (대문자로 변환, 소문자로 변환, 각 단어의 첫글자를 대문자로 변환, 대소문자 전환) |
| help |
| 도움말 |
| about |
| 사이냅에디터 정보 |
| selectionMode |
| 도형 선택 모드 |
| responsive |
| 반응형 보기 |
| contentsProperties |
| 편집 영역 속성 |
| | | 가로 나눔선 | |
| - | 세로 나눔선 |
플러그인
| KEY | ICON | 설명 |
|---|---|---|
| specialCharacter |
| 특수문자 삽입 |
| emoji |
| 이모지 삽입 |
| shapeEditor |
| 도형삽입 |
| tuiImageEditor |
| 이미지 에디터 |
| WebAccessibilityChecker |
| 웹 접근성 도구 |
| personalDataProtection |
| 개인정보 보호 |
| webSpellChecker |
| 맞춤법 검사 |
