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