Page History

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

설정방법

'editor.toolbar'키를 이용해서 아래와 같이 설정합니다You can freely arrange and use various features provided by SynapEditor.

Configuration Method

Use "editor.toolbar" key on initialization to configure the toolbar features.

Code Block

language	js
theme	Emacs
title	synapeditor.config.js

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

[적용결과Application result]

기본설정

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

Basic Configuration

The basic toolbar configuration is as follows.

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

[적용결과Application result]

전체기능사용

사이냅에디터에서 제공하는 모든 기능을 사용하시려면

Using Every Features

To use every features provided by SynapEditor, remove 'editor.toolbar' 설정을 제거하면 됩니다.

전체기능 페이지에서 미리 확인 할 수 있습니다.

아이콘 및 기능설명

각 기능에 대한 KEY, ICON, 설명을 아래를 참고하세요.

setting.

You can preview the features at the Full Features page.

Icons and Actions

As for keys, icons, and descriptions of each function, please refer to the below.

TOOLBAR KEY	ICON설명	ACTION
new	Image Modified 편집중인 내용을 모두 지우고 새문서	Creates a new document; the current contents will be discarded.
open	Image Modified 문서를 임포트	Imports an MS Word / LibreOffice document.
print	인쇄	Prints the current document.
pageBreak	인쇄시 사용되는 페이지 구분자	Inserts page break.
template	템플릿 다이얼로그	Opens Templates dialogue box.
autoSave	자동저장된 문서목록	Opens auto-saved document list.
undo	실행취소	Undoes the last command.
redo	재실행	Redoes the last undone command.
paragraphStyle		문단스타일 Sets paragraph style (P, H1 ~ H6).
paragraphStyleWithText	Image Modified 문단스타일 지정버튼 드롭다운	Shows drop-down menu for paragraph styles.
fontFamily	글꼴을 설정	Sets font family.
fontFamilyWithText	Image Modified 글꼴설정 버튼 드롭다운	Shows drop-down menu for font family.
fontSize	글자크기	Sets font size.
fontSizeWithText	Image Modified 글자크기 드롭다운	Shows drop-down menu for font size.
customParagraphStyle	사용자정의 문단스타일을 보여줍니다	Shows predefined custom paragraph styles.
사용자정의 문단스타일은 config에 설정해야합니다.customRunStyle	사용자정의 글자스타일을 보여줍니다	Shows predefined custom text styles.
사용자정의 글자스타일은 config에 설정해야합니다.growFont	글자크기 한단계 키움	Grows font size.
shrinkFont	글자크기 한단계 줄임	Shrinks font size.
bold	굵게	Sets as boldface.
italic	기울임	Sets as italic.
underline	밑줄	Sets as underlined.
strike	취소선	Sets as strikethrough.
superScript	위첨자	Sets as superscript.
subScript	아래첨자	Sets as subscript.
fontColor	글자색	Set text color.
fontBackgroundColor	글자배경색	Set text background color.
align	>	문단정렬 (드롭다운: left, center, right, justify)
alignLeft alignCenter alignRight alignJustify	Image Removed Image Removed Image Removed Image Removed	왼쪽정렬 중앙정렬 오른쪽정렬 양쪽정렬
Set text alignment.
copy	복사	Copy the current block.
cut	잘라내기	Cut the current block.
paste	붙여넣기	Paste the copied contents into the current position.
copyRunStyle	서식복사	Copy text style only.
pasteRunStyle	서식붙여넣기	Paste text style to the current block.
removeRunStyle	서식지우기	Clear text formatting from the current block.
link	링크	Insert link to the current block.
unlink	링크해제	Remove the selected 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.
shapeEditor	Image Added	Insert shape.
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 the current block as bulleted (unordered) list.
numberedList	글머리 번호	Set the current block as numbered (ordered) list.
multiLevelList	다단계 글머리	Set the current block as multi-level list.
increaseIndent	들여쓰기	Increase indentation level for the current paragraph.
decreaseIndent	내어쓰기	Decrease indentation level for the current paragraph.
lineHeight	줄간격	Set line spacing for the 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.
divGuidedivOutline	레이어	외각선 보이기/감추기Show/hide guiding box of layers.
accessibility	Image Added	Open dialogue box for web accessibility check.
personalDataProtection	Image Added	Open dialogue box for personal data protection.
find	찾기	/바꾸기Open dialogue box for find/replace.
	\|가로 나눔선	Horizontal dividing line
	-	세로 나눔선

Page tree

Versions Compared

Old Version 1

New Version Current

Key