Configurating Toolbar

사이냅에디터에서 제공하는 다양한 기능들을 자유롭게 배치하고 사용 할 수 있습니다.

설정방법

Use "editor.toolbar" key on initialization to configure the functionality of the 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, 설명을 아래를 참고하세요.

TOOLBAR KEY	ICON	ACTION
new		Create a new document; existing content will be destroyed.
open		Import an MS Word / LibreOffice document.
print		Print current document.
pageBreak		Insert page break.
template		Open Templates dialogue box.
autoSave		Open auto-saved document list.
undo		Undo last command.
redo		Redo last command.
paragraphStyle		Set paragraph style (P, H1 ~ H6).
paragraphStyleWithText		Show drop-down menu for paragraph styles.
fontFamily		Set font family.
fontFamilyWithText		Show drop-down menu for font families.
fontSize		Set font size.
fontSizeWithText		Show drop-down menu for font sizes.
customParagraphStyle		Show predefined custom paragraph styles.
customRunStyle		Show predefined custom text styles.
growFont		Larger font size.
shrinkFont		Smaller font size.
bold		Set as boldface.
italic		Set as italic.
underline		Set as underlined.
strike		Set as strikethrough.
superScript		Set as superscript.
subScript		Set as subscript.
fontColor		Set text color.
fontBackgroundColor		Set text background color.
align		Set text alignment.
copy		Copy current selection.
cut		Cut current selection.
paste		Paste into current position.
copyRunStyle		Copy text style only.
pasteRunStyle		Paste text style to current selection.
removeRunStyle		Clear text formatting from current selection.
link		Insert link to current selection.
unlink		Delete current link.
table		Insert table.
image		Insert image.
background		Set background image/color for the whole document.
video		Insert video.
file		Insert file.
horizontalLine		Insert horizontal line.
specialCharacter		Insert special character.
emoji		Insert emoji character.
div		Insert a <div> layer.
drawDiv		Insert a <div> layer by mouse dragging.
quote		Insert quote.
bulletList		Set current selection as bulleted (unordered) list.
numberedList		Set current selection as numbered (ordered) list.
multiLevelList		Set current selection as multi-level list.
increaseIndent		Increase indentation level for current paragraph.
decreaseIndent		Decrease indentation level for current paragraph.
lineHeight		Set line spacing for current paragraph.
lineHeightWithText		Show drop-down menu for line spacing.
paragraphProperties		Open dialogue box for paragraph properties.
fullScreen		View full screen.
source		View source code.
preview		Change to preview mode.
ruler		Show ruler.
divOutline		Show/hide guiding box of layers.
accessibility		Open dialogue box for web accessibility check.
personalDataProtection		Open dialogue box for personal data protection.
find		Open dialogue box for find/replace.

KEY	ICON	설명
new		편집중인 내용을 모두 지우고 새문서
open		문서를 임포트
print		인쇄
pageBreak		인쇄시 사용되는 페이지 구분자
template		템플릿 다이얼로그
autoSave		자동저장된 문서목록
undo		실행취소
redo		재실행
paragraphStyle		문단스타일 (P, H1 ~ H6)
paragraphStyleWithText		문단스타일 지정버튼 드롭다운
fontFamily		글꼴을 설정
fontFamilyWithText		글꼴설정 버튼 드롭다운
fontSize		글자크기
fontSizeWithText		글자크기 드롭다운
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		가로줄 삽입
specialCharacter		특수문자 삽입
emoji		이모지 삽입
div		레이어 삽입
drawDiv		레이어 그리기
quote		인용문구 삽입
bulletList		글머리 기호
numberedList		글머리 번호
multiLevelList		다단계 글머리
increaseIndent		들여쓰기
decreaseIndent		내어쓰기
lineHeight		줄간격
lineHeightWithText		줄간격 버튼
paragraphProperties		문단 상세속성 편집
fullScreen		전체화면
source		소스보기
preview		미리보기
ruler		줄자
divGuide		레이어 외각선 보이기/감추기
find		찾기/바꾸기
\|		가로 나눔선
-		세로 나눔선

Page tree

Configurating Toolbar

설정방법

기본설정

전체기능사용

아이콘 및 기능설명