Page History

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

설정방법

Use "editor.toolbar" key on initialization to configure the functionality of the toolbar.

Code Block

language	js
theme	Emacs
title	synapeditor.config.js

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

[적용결과]

기본설정

기본 제공되는 툴바 설정은 아래와 같습니다.

Code Block

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

Image Removed

Image Added	Show/hide guiding box of layers.
accessibility	Image Modified	Open dialogue box for web accessibility check.
personalDataProtection	Image Modified	Open dialogue box for personal data protection.
find	Image Modified	Open dialogue box for find/replace

.

KEY	ICON	설명
new	Image Removed	편집중인 내용을 모두 지우고 새문서
open	Image Removed	문서를 임포트
print	Image Removed	인쇄
pageBreak	Image Removed	인쇄시 사용되는 페이지 구분자
template	Image Removed	템플릿 다이얼로그
autoSave	Image Removed	자동저장된 문서목록
undo	Image Removed	실행취소
redo	Image Removed	재실행
paragraphStyle	Image Removed	문단스타일 (P, H1 ~ H6)
paragraphStyleWithText	Image Removed	문단스타일 지정버튼 드롭다운
fontFamily	Image Removed	글꼴을 설정
fontFamilyWithText	Image Removed	글꼴설정 버튼 드롭다운
fontSize	Image Removed	글자크기
fontSizeWithText	Image Removed	글자크기 드롭다운
customParagraphStyle	Image Removed	사용자정의 문단스타일을 보여줍니다. 사용자정의 문단스타일은 config에 설정해야합니다.
customRunStyle	Image Removed	사용자정의 글자스타일을 보여줍니다. 사용자정의 글자스타일은 config에 설정해야합니다.
growFont	Image Removed	글자크기 한단계 키움
shrinkFont	Image Removed	글자크기 한단계 줄임
bold	Image Removed	굵게
italic	Image Removed	기울임
underline	Image Removed	밑줄
strike	Image Removed	취소선
superScript	Image Removed	위첨자
subScript	Image Removed	아래첨자
fontColor	Image Removed	글자색
fontBackgroundColor	Image Removed	글자배경색
align	Image Removed > Image Removed Image Removed Image Removed Image Removed	문단정렬 (드롭다운: left, center, right, justify)
alignLeft alignCenter alignRight alignJustify	Image Removed Image Removed Image Removed Image Removed	왼쪽정렬 중앙정렬 오른쪽정렬 양쪽정렬
copy	Image Removed	복사
cut	Image Removed	잘라내기
paste	Image Removed	붙여넣기
copyRunStyle	Image Removed	서식복사
pasteRunStyle	Image Removed	서식붙여넣기
removeRunStyle	Image Removed	서식지우기
link	Image Removed	링크
unlink	Image Removed	링크해제
table	Image Removed	표 삽입
image	Image Removed	이미지 삽입
background	Image Removed	문서 배경 이미지 및 색 지정
video	Image Removed	동영상 삽입
file	Image Removed	파일 삽입
horizontalLine	Image Removed	가로줄 삽입
specialCharacter	Image Removed	특수문자 삽입
emoji	Image Removed	이모지 삽입
div	Image Removed	레이어 삽입
drawDiv	Image Removed	레이어 그리기
quote	Image Removed	인용문구 삽입
bulletList	Image Removed	글머리 기호
numberedList	Image Removed	글머리 번호
multiLevelList	Image Removed	다단계 글머리
increaseIndent	Image Removed	들여쓰기
decreaseIndent	Image Removed	내어쓰기
lineHeight	Image Removed	줄간격
lineHeightWithText	Image Removed	줄간격 버튼
paragraphProperties	Image Removed	문단 상세속성 편집
fullScreen	Image Removed	전체화면
source	Image Removed	소스보기
preview	Image Removed	미리보기
ruler	Image Removed	줄자
divGuide	Image Removed	레이어 외각선 보이기/감추기
find	Image Removed	찾기/바꾸기
	\|	가로 나눔선	-	세로 나눔선\|	Horizontal dividing line
	-	Vertical dividing line

Page tree

Versions Compared

Old Version 2

New Version 3

Key

설정방법

기본설정

전체기능사용

아이콘 및 기능설명