Synap Editor Documentation
Page tree

Versions Compared

Old Version 2

changes.mady.by.user Kwon JongPyo

Saved on

compared with

New Version Current

changes.mady.by.user Kwon JongPyo

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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

설정방법

You can freely arrange and use various features provided by SynapEditor.

Configuration Method

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

Code Block
languagejs
themeEmacs
titlesynapeditor.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
languagejs
themeEmacs
titlesynapeditor.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 KEYICONACTION
new

Image Modified

Create
Creates a new document;
existing content
the current contents will be
destroyed
discarded.
open

Image Modified

Import
Imports an MS Word / LibreOffice document.
print

Image Modified

Print
Prints the current document.
pageBreak

Image Modified

Insert
Inserts page break.
template

Image Modified

Open
Opens Templates dialogue box.
autoSave

Image Modified

Open
Opens auto-saved document list.
undo

Image Modified

Undo
Undoes the last command.
redo

Image Modified

Redo
Redoes the last undone command.
paragraphStyle

Image Modified

Set
Sets paragraph style (P, H1 ~ H6).
paragraphStyleWithText

Image Modified

Show
Shows drop-down menu for paragraph styles.
fontFamily

Image Modified

Set
Sets font family.
fontFamilyWithText

Image Modified

Show
Shows drop-down menu for font
families
family.
fontSize

Image Modified

Set
Sets font size.
fontSizeWithText

Image Modified

Show
Shows drop-down menu for font
sizes
size.
customParagraphStyle

Image Modified

Show
Shows predefined custom paragraph styles.
customRunStyle

Image Modified

Show
Shows predefined custom text styles.
growFont

Image Modified

Larger
Grows font size.
shrinkFont

Image Modified

Smaller
Shrinks font size.
bold

Image Modified

Set
Sets as boldface.
italic

Image Modified

Set
Sets as italic.
underline

Image Modified

Set
Sets as underlined.
strike

Image Modified

Set
Sets as strikethrough.
superScript

Image Modified

Set
Sets as superscript.
subScript

Image Modified

Set
Sets 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 the current
selection
block.
cut

Image Modified

Cut the current
selection
block.
paste

Image Modified

Paste the copied contents into the current position.
copyRunStyle

Image Modified

Copy text style only.
pasteRunStyle

Image Modified

Paste text style to the current
selection
block.
removeRunStyle

Image Modified

Clear text formatting from the current
selection
block.
link

Image Modified

Insert link to the current
selection
block.
unlink

Image Modified

Delete current
Remove the selected 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.
shapeEditor

Image Added

Insert shape.
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 the current
selection
block as bulleted (unordered) list.
numberedList

Image Modified

Set
Set the current
selection
block as numbered (ordered) list.
multiLevelList

Image Modified

Set
Set the current
selection
block as multi-level list.
increaseIndent

Image Modified

Increase indentation level for the current paragraph.
decreaseIndent

Image Modified

Decrease indentation level for the current paragraph.
lineHeight

Image Modified

Set line spacing for the 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
.
KEYICON설명
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

글자크기 한단계 키움
shrinkFontImage 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

찾기/바꾸기
|가로 나눔선-세로 나눔선

관련정보

  • 버튼 크기 설정
  • 툴바영역 고정
    • Inline 에디터

    		|Horizontal dividing line

    		-Vertical dividing line



    See also