사이냅에디터에서 제공하는 다양한 기능들을 자유롭게 배치하고 사용 할 수 있습니다.
설정방법
'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 | 맞춤법 검사 |