사이냅에디터에서 제공하는 다양한 기능들을 자유롭게 배치하고 사용 할 수 있습니다.
설정방법
'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 | 글꼴설정 드롭다운 | |
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 | 서식지우기 | |
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 2.9.0 이상 | 도형, 레이어 편집가이드 보이기/감추기 | |
find | 찾기/바꾸기 | |
| | 가로 나눔선 | |
- | 세로 나눔선 |