툴바 설정

Synap Editor에서 제공하는 다양한 기능을 자유롭게 배치하고 사용할 수 있습니다.

설정 방법

아래와 같이 editor.toolbar 키를 사용하여 툴바를 구성합니다.

// synapeditor.config.js
{
  'editor.toolbar': [
    'new', 'open', '|',
    'paragraphStyleWithText', '|',
    'fontFamilyWithText', '|',
    'fontSizeWithText', '|',
    'bold', 'italic', 'underline', 'strike', '|',
    'fontColor', 'fontBackgroundColor'
  ]
}

[Result]

1.00

기본 설정

기본 툴바 설정은 다음과 같습니다.

// 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'
  ],
}

[Result]

1.00

모든 기능 사용

Synap Editor에서 제공하는 모든 기능을 사용하려면 editor.toolbar 설정을 제거하면 됩니다.

모든 기능은 전체 기능 데모에서 직접 사용해 볼 수 있습니다.

아이콘 및 기능 목록

아래 표를 참고하여 각 기능의 키, 아이콘, 설명을 확인합니다.

키	아이콘	설명
`new`		모든 편집 내용을 지우고 새 문서를 시작합니다
`open`		문서를 임포트합니다
`print`		인쇄
`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`		문단 정렬 (드롭다운: 왼쪽, 가운데, 오른쪽, 양쪽 맞춤)
`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`		div 삽입
`drawAbsolutePositionDiv`		레이어 그리기
`quote`		인용문구 삽입
`bulletList`		글머리 기호
`numberedList`		글머리 번호
`multiLevelList`		다단계 글머리
`increaseIndent`		들여쓰기 증가
`decreaseIndent`		들여쓰기 감소
`lineHeight`		줄 간격
`lineHeightWithText`		줄 간격 버튼
`paragraphProperties`		문단 상세 속성 편집
`fullScreen`		전체 화면 모드
`source`		소스 보기
`preview`		미리보기
`ruler`		눈금자
`divGuide` (deprecated)		레이어 외곽선 표시/숨기기
`guide` (2.9.0+)		Shape 및 레이어 편집 가이드 표시/숨기기
`find`		찾기 및 바꾸기
`conversion`		변환 (대문자, 소문자, 제목 형식, 대/소문자 전환)
`help`		도움말
`about`		Synap Editor 정보
`selectionMode`		Shape 선택 모드
`responsive`		반응형 보기
`contentsProperties`		편집 영역 속성 편집
`\|`	—	버튼 사이의 세로 구분선
`-`	—	새로운 툴바 행을 시작하는 줄 바꿈
`codeBlock` (릴리즈 3.3.0+)		코드 블록
`conditionalFormatting` (릴리즈 3.3.0+)		조건부 서식
`export` (릴리즈 3.3.2602+)		내보내기
`showMemo` (릴리즈 3.3.0+)		댓글

플러그인

키	아이콘	설명
`specialCharacter`		특수기호 삽입
`emoji`		이모지 삽입
`shapeEditor`		shape 삽입
`tuiImageEditor`		이미지 에디터
`WebAccessibilityChecker`		웹 접근성 도구
`personalDataProtection`		개인정보 보호
`webSpellChecker`		맞춤법 검사기