...
독립적인 config file을 이용한 환경설정
설정 객체 사용방법: 스크립트 추가, 에디터 초기화 config를 설정합니다.
Code Block | ||||
---|---|---|---|---|
| ||||
<!DOCTYPE html> <html lang="ko"> <script src='synapeditor.config.js'></script> <script> function initEditor() { new SynapEditor('synapEditor', synapEditorConfig); } </script> <body onload="initEditor();"> <div id="synapEditor"></div> </body> </html> |
사이냅 에디터 기본 설정 객체 입니다.
key, value 형태로 설정하며, 사용하지 않는 설정 제거시 기본설정으로 동작합니다.
Code Block | ||||||
---|---|---|---|---|---|---|
| ||||||
var synapEditorConfig = { 'editor.license': '/resource/license.json', 'editor.size.width': '100%', 'editor.size.height': '100%', 'editor.lang.default': 'en', 'editor.menu.show': false, 'editor.toolbar': ['new','open','|', 'paragraphStyleWithText', '|', 'fontFamilyWithText', '|','fontSizeWithText', '|','bold', 'italic', 'underline', 'strike', '|','fontColor', 'fontBackgroundColor'] } |
...
TOOLBAR KEY | ICON | 설명 |
---|---|---|
new | 편집중인 내용을 모두 지우고 새문서를 만든다.새문서 | |
open | 문서를 임포트한다.임포트 | |
인쇄를 한다인쇄 | ||
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.lang.default' 키를 이용해서 기본언어를 설정한다설정합니다. 기본언어는 사용자환경에 맞는 언어가 없을 경우 표시되는 언어를 말한다말합니다.
Code Block | ||||||
---|---|---|---|---|---|---|
| ||||||
{ 'editor.lang.default': 'en' } |
...
사용자 환경에 관계없이 특정 언어를 서비스를 하려면 'editor.lang' 키를 이용한다이용합니다.
Code Block | ||||||
---|---|---|---|---|---|---|
| ||||||
{ 'editor.lang' : 'en' } |
...
브라우저에서 접근가능한 특정 위치에 template 파일을 등록하고 아래와 같이 설정하면 template기능을 사용 할 수 있다있습니다.
Code Block | ||||||
---|---|---|---|---|---|---|
| ||||||
{ '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 | ||||||
---|---|---|---|---|---|---|
| ||||||
{ 'editor.customStyle.paragraph': [ { 'name': 'Gray', 'style': { 'color': { 'r': 170, 'g': 170, 'b': 170 } } } ], } |
...
자동 저장
자동저장 사용여부 및 저장주기는 아래와 같이 설정가능하다.설정가능합니다.
단위: ms (기본값 = 60000)
Code Block | ||||||
---|---|---|---|---|---|---|
| ||||||
{ 'editor.autoSave': true, 'editor.autoSave.period': 60000, } |
...
'editor.contentFilter.allowIFrame' 설정을 false로 설정하면 사용자 iframe tag 삽입을 제한하여 자동 태그 제거제거합니다.
Code Block | ||||||
---|---|---|---|---|---|---|
| ||||||
{ 'editor.contentFilter.allowIFrame': false } |
...
'editor.contentFilter.allowIScript' 설정을 false로 설정하면 사용자 script tag 삽입을 제한하여 자동 태그 제거제거합니다.
Code Block | ||||||
---|---|---|---|---|---|---|
| ||||||
{ 'editor.contentFilter.allowScript': false } |
...
'editor.mode.sticky' 설정으로 에디터에서 헤더 영역을 외부 스크롤에 고정할지 여부를 설정 합니다설정합니다. (기본값 = false)
Code Block | ||||||
---|---|---|---|---|---|---|
| ||||||
{ 'editor.mode.sticky': false } |
...
'editor.import.api', 'editor.upload.image.api', 'editor.upload.video.api', 'editor.upload.file.api' 키를 사용하여 업로드 및 임포트 API를 설정한다설정합니다.
이 때 서버쪽 API (URL)는 Back-end 구현에 따라 변경해야 한다. 자세한 사항은 서버연동 매뉴얼을 참고한다참고합니다.
Code Block | ||||||
---|---|---|---|---|---|---|
| ||||||
{ '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 | ||||||
---|---|---|---|---|---|---|
| ||||||
{ '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'] } |
...