Status
title 릴리즈 2.2.0 이상

Table of Contents

Synap Editor 초기화

사이냅 에디터의 초기화는 아래와 같이 새 객체를 생성하는 구문으로 간단히 이루어집니다.

...

TOOLBAR 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)
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		줄자
divOutline		레이어 외각선 보이기/감추기
accessibility		웹접근성 검사
personalDataProtection		개인정보보호 (검출)
find		찾기/바꾸기

글꼴 목록

...

'editor.fontFamily'로 편집시 사용할 폰트 목록을 설정합니다.

Code Block

language	js
theme	Emacs
title	synapeditor.config.jsonjs

{
	'editor.fontFamily': {
    		'ko':	 [
        	    '돋움', '굴림', '바탕', '궁서', '맑은고딕',
    	        'Arial', 'Comic Sans MS', 'Courier New', 'Georgia',
    	        'Lucida Sans Unicode', 'Tahoma', 'Times New Roman', 'Trebuchet MS', 'Verdana'
	        ],
    	    'en': [
	            'Arial', 'Comic Sans MS', 'Courier New', 'Georgia',
	            'Lucida Sans Unicode', 'Tahoma', 'Times New Roman', 'Trebuchet MS', 'Verdana'
	        ]
  	  },
}

한국어일 때 (ko)	영어일 때 (en)

메뉴 설정

...

Code Block

language	js
theme	Emacs
title	synapeditor.config.jsonjs

{
	'editor.menu.show': true
}

...

Code Block

language	js
theme	Emacs
title	synapeditor.config.jsonjs

{
	'editor.menu.list': [
    	'file',
	    'edit',
	    'view',
	    'insert',
	    'format',
	    'table',
	    'tools'
	  ]
}

...

Code Block

language	js
theme	Emacs
title	synapeditor.config.jsonjs

{
	'editor.menu.definition': {
    	'file': [
	      'new',
	      'open',
	      '-',
	      'template',
	      'autoSave',
	      'print',
	      'pageBreak'
	    ],
	    'edit': [
	      'undo',
	      'redo',
	      '-',
	      'copy',
	      '-',
	      'find'
	    ],
	    'view': [
	      'fullScreen',
	      '-',
	      'source',
	      'preview'
	    ],
	    'insert': [
	      'link',
	      'image',
	      'background',
	      '-',
	      'video',
	      'file',
	      'horizontalLine',
	      '-',
	      'specialCharacter',
	      'emoji'
	    ],
	    'format': [
	      'bold',
	      'italic',
	      'underline',
	      'strike',
	      '-',
	      'superScript',
	      'subScript',
	      '-',
	      {
	        'groupName': 'list',
	        'subMenuItems': [
	          'bulletList',
	          'numberedList',
	          'multiLevelList'
	        ]
	      },
	      'increaseIndent',
	      'decreaseIndent',
	      '-',
	      {
	        'groupName': 'align',
	        'subMenuItems': [
	          'alignLeft',
	          'alignCenter',
	          'alignRight',
	          'alignJustify'
	        ]
	      },
	      {
	        'groupName': 'format',
	        'subMenuItems': [
	          'copyRunStyle',
	          'pasteRunStyle',
	          'removeRunStyle'
	        ]
	      },
	      'paragraphProperties'
	    ],
	    'table': [
	      'table',
	      'deleteTable',
	      'tableProperties',
	      '-',
	      {
	        'groupName': 'row',
	        'subMenuItems': [
	          'insertRowBefore',
	          'insertRowAfter',
	          'deleteRow'
	        ]
	      },
	      {
	        'groupName': 'column',
	        'subMenuItems': [
	          'insertColBefore',
	          'insertColAfter',
	          'deleteCol'
	        ]
	      },
	      {
	        'groupName': 'cell',
	        'subMenuItems': [
	          'mergeCell',
	          'splitCell',
	          'cellProperties'
	        ]
	      }
	    ],
	    'tools': [
	      'accessibility',
	      'personalDataProtection'
	    ]
	  }
}

...

Code Block

language	js
theme	Emacs
title	synapeditor.config.jsonjs

{  
	'editor.import.maxSize': 10485760,
	'editor.import.api': '/importDoc',
	'editor.import.param': {},
	'editor.upload.maxSize': 3145728,
	'editor.upload.image.api': '/uploadImage',
	'editor.upload.image.param': {},
	'editor.upload.video.api': '/uploadVideo',
	'editor.upload.video.param': {},
	'editor.upload.file.api': '/uploadFile',
	'editor.upload.file.param': {},
}

업로드 가능 확장자 설정

...

'editor.upload.image.extensions', 'editor.upload.video.extensions', 'editor.upload.file.extensions' 키를 사용해 업로드 가능 확장자를 설정할 수 있다.

Code Block

language	js
theme	Emacs
title	synapeditor.config.jsonjs

{
	'editor.upload.image.extensions': ['jpg', 'gif', 'png', 'jpeg'],
	'editor.upload.video.extensions': ['mp4', 'ogg', 'webm'],
	'editor.upload.file.extensions': ['bmp', 'css', 'csv', 'diff', 'doc', 
									'docx', 'eof', 'gif', 'jpeg', 'jpg', 
									'json', 'mp3', 'mp4', 'm4a', 'odp', 
									'ods', 'odt', 'ogg', 'otf', 'patch', 
									'pdf', 'png', 'ppt', 'pptx', 'rtf', 
									'svg', 'swf', 'textile', 'tif', 'tiff',
									'ttf', 'txt', 'wav', 'webm', 'woff',
									'xls', 'xlsx', 'xml', 'md', 'vtt', 
									'hwp', 'hml', 'html']
}

...

Code Block

language	js
theme	Emacs
title	synapeditor.config.jsonjs

{
	'editor.lang.default': 'en'
}

...

Code Block

language	js
theme	Emacs
title	synapeditor.config.jsonjs

{
	'editor.lang' : 'en'
}

고급 설정

...

Code Block

language	js
theme	Emacs
title	synapeditor.config.jsonjs

{
	'editor.template': [
	{
		'category': 'template_category1',
		'label': 'Report',
		'items': [
		{
			'name': 'Research Report',
			'path': '/resource/template/template1.html'
		},
		{
			'name': 'Sales Report',
			'path': '/resource/template/template2.html'
		}]
	}]

}

...

Code Block

language	js
theme	Emacs
title	synapeditor.config.jsonjs

{
	'editor.customStyle.paragraph': [
    {
      'name': 'Gray',
      'style': {
        'color': {
          'r': 170,
          'g': 170,
          'b': 170
        }
      }
    }
  ],
}

...

Code Block

language	js
theme	Emacs
title	synapeditor.config.jsonjs

{
	'editor.customStyle.textRun': [
    {
      'name': 'BigRed',
      'style': {
        'fontSize': 32,
        'color': {
          'r': 255,
          'g': 0,
          'b': 0
        }
      }
    },
    {
      'name': 'SmallBlue',
      'style': {
        'fontSize': 16,
        'color': {
          'r': 0,
          'g': 0,
          'b': 255
        }
      }
    }
  ]
}

...

기본 스타일을 지정하여 inline-style로 랜더링 됩니다.

...

Status

title	릴리즈 2.2.0 이상

...

Status

title	릴리즈 2.1.0 이상

...

Status

title	릴리즈 2.2.0 이상

'editor.defaultStyle': 지정하고싶은 'editor.defaultStyle': 지정하고싶은 모델 Element Type에 기본 속성을 지정할 수 있습니다.

cssText String 형태로 지정하고싶은 Style을 설정
현재 나열된 Element들의 속성만 지정 가능

Code Block

language	js
theme	Emacs
title	synapeditor.config.js

'editor.defaultStyle': {
    'Body': 'font-family: Arial, Helvetica, sans-serif; font-size: 11pt; line-height: 1.2;',
    'Paragraph': '',
    'TextRun': '',
    'Div': '',
    'Image': '',
    'Video': '',
    'List': '',
    'ListItem': '',
    'Quote': '',
    'Table': '',
    'TableRow': '',
    'TableCell': '',
    'HorizontalLine': '',
    'Iframe': ''
},

Status

title	릴리즈 2.1.0 이상

'editoir.defaultStyle': Object 형태로 Body Style 기본 속성을 지정 할 수 있습니다.

Code Block

language	js
theme	Emacs

'editor.defaultStyle': {
    fontFamily: 'Arial, Helvetica, sans-serif',
    fontSize: 11,
    lineHeight: {
  
     value'TableCell': 1.2'',
        unit'HorizontalLine': '',
     }'Iframe': ''
},

자동 저장

자동저장 사용여부 및 저장주기는 아래와 같이 설정가능하다.

Code Block

language	js
theme	Emacs
title	synapeditor.config.jsonjs

{
	'editor.autoSave': true,
	'editor.autoSave.period': 60000,
}

...

Code Block

language	js
theme	Emacs
title	synapeditor.config.jsonjs

 {
	'editor.contentFilter.allowIFrame': false,
	'editor.contentFilter.allowScript': false
}

Unload 메세지

...

title	릴리즈 2.1.0 이상

'editor.unloadMessage' 값을 true로 설정하면 웹페이지가 unload 되었을 때 '페이지를 나가시겠습니까' 확인메세지가 보여집니다. (기본값 = false)

Code Block

language	js
theme	Emacs
title	synapeditor.config.jsonjs

{
	'editor.unloadMessage': false
}

가로 스크롤

...

릴리즈 2.2.0 이상'editor.horizontalScroll' 값을 true로 설정하면 에디터에서 가로스크롤을 사용합니다. (기본값 = true)

Code Block

language	js
theme	Emacs
title	synapeditor.config.jsonjs

{
	'editor.horizontalScroll': true
}

레이어 가이드

...

Space shortcuts

Page tree

Versions Compared

Old Version 3

New Version 4

Key

Status
title 릴리즈 2.2.0 이상

Synap Editor 초기화

글꼴 목록

메뉴 설정

업로드 가능 확장자 설정

고급 설정

자동 저장

Unload 메세지

가로 스크롤

릴리즈 2.2.0 이상'editor.horizontalScroll' 값을 true로 설정하면 에디터에서 가로스크롤을 사용합니다. (기본값 = true)
Code Block
language js
theme Emacs
title synapeditor.config.jsonjs
{ 'editor.horizontalScroll': true }

레이어 가이드

'editor.guide.div' 값을 true로 설정하면 에디터에서 레이어 가이드를 표시합니다. (기본값 = false)
...

Space shortcuts

Page tree

Page History

Versions Compared

Old Version 3

New Version 4

Key

Statustitle릴리즈 2.2.0 이상

Synap Editor 초기화

글꼴 목록

메뉴 설정

업로드 가능 확장자 설정

고급 설정

자동 저장

Unload 메세지

가로 스크롤

릴리즈 2.2.0 이상'editor.horizontalScroll' 값을 true로 설정하면 에디터에서 가로스크롤을 사용합니다. (기본값 = true) Code BlocklanguagejsthemeEmacstitlesynapeditor.config.jsonjs{ 'editor.horizontalScroll': true }

레이어 가이드

'editor.guide.div' 값을 true로 설정하면 에디터에서 레이어 가이드를 표시합니다. (기본값 = false)...

Status
title 릴리즈 2.2.0 이상

릴리즈 2.2.0 이상'editor.horizontalScroll' 값을 true로 설정하면 에디터에서 가로스크롤을 사용합니다. (기본값 = true)
Code Block
language js
theme Emacs
title synapeditor.config.jsonjs
{ 'editor.horizontalScroll': true }

'editor.guide.div' 값을 true로 설정하면 에디터에서 레이어 가이드를 표시합니다. (기본값 = false)
...