사이냅 에디터 문서
Space shortcuts
Page tree
Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 4 Next »

포커스 지정

'editor.initFocus' 설정으로 에디터 첫 로딩후 안쪽으로 포커스 지정 여부를 설정합니다. (기본값 = true)

synapeditor.config.js
{
	'editor.initFocus': true
}


템플릿

브라우저에서 접근가능한 특정 위치에 template 파일을 등록하고 아래와 같이 설정하면 template기능을 사용 할 수 있습니다.

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

}

사용자 정의 스타일 (Custom style)

사용자정의 문단스타일을 사용하려면 아래와 같이 환경설정을 해야 합니다.

synapeditor.config.js
{
	'editor.customStyle.paragraph': [
    {
      'name': 'Gray',
      'style': {
        'color': {
          'r': 170,
          'g': 170,
          'b': 170
        }
      }
    }
  ],
}
  • 사용자정의 문단스타일 적용결과



사용자 정의 런스타일은 아래와 같이 설정합니다.

synapeditor.config.js
{
	'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
        }
      }
    }
  ]
}
  • 사용자 정의 런스타일 설정 결과



기본 스타일 지정 (Default Style)

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


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

  • cssText String 형태로 지정하고싶은 Style을 설정
  • 현재 나열된 Element들의 속성만 지정 가능
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': ''
},
  • Body: .se-contents영역을 의미합니다.
  • Paragraph: <p> tag를 의미합니다.
  • TextRun: <span> tag를 의미합니다.
  • Div: <div> tag를 의미합니다.
  • Image: <img> tag를 의미합니다.
  • Video: <video> tag를 의미합니다.
  • List: <ul> tag를 의미합니다.
  • ListItem: <li> tag를 의미합니다.
  • Quote: <blockquote> tag를 의미합니다.
  • Table: <table> tag를 의미합니다.
  • TableRow: <tr> tag를 의미합니다.
  • TableCell: <td> tag를 의미합니다.
  • HorizontalLine: <hr> tag를 의미합니다.
  • Iframe: <iframe> tag를 의미합니다.

자동 저장

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

단위: ms (기본값 = 60000)

synapeditor.config.js
{
	'editor.autoSave': true,
	'editor.autoSave.period': 60000,
}


ContentFilter

'editor.contentFilter.allowIFrame' 설정을 false로 설정하면 사용자 iframe tag 삽입을 제한하여 자동 태그 제거합니다.

synapeditor.config.js
{
	'editor.contentFilter.allowIFrame': false
}


'editor.contentFilter.allowIScript' 설정을 false로 설정하면 사용자 script tag 삽입을 제한하여 자동 태그 제거합니다.

synapeditor.config.js
{
	'editor.contentFilter.allowScript': false
}


Unload 메세지

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

synapeditor.config.js
{
	'editor.unloadMessage': false
}

Import API 및 Upload API 설정

'editor.import.api', 'editor.upload.image.api', 'editor.upload.video.api', 'editor.upload.file.api' 키를 사용하여 업로드 및 임포트 API를 설정합니다.

이 때 서버쪽 API (URL)는 Back-end 구현에 따라 변경해야 합니다. 자세한 사항은 서버연동 매뉴얼을 참고합니다.

synapeditor.config.js
{  
	'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': {},
}

임포트시 항상 새로넣기 설정

릴리즈 2.4.1 이상

'editor.import.alwaysOverwriting' 옵션을 설정하여 이어넣기/새로넣기 확인 메세지 없이 항상 새로넣도록 설정합니다. (기본값 = false)

synapeditor.config.js
{
	'editor.import.alwaysOverwriting': false
}
editor.import.alwaysOverwriting: trueeditor.import.alwaysOverwriting: false (기본)


업로드시 formData File Field Name 설정  

릴리즈 2.2.3 이상

'editor.import.fileFiledName', 'editor.upload.image.fileFiledName', 'editor.upload.video.fileFiledName', 'editor.upload.file.fileFiledName' 키를 사용하여 업로드 및 임포트시 formData에 fieldName을 설정 합니다.

synapeditor.config.js
{ 
    'editor.import.fileFieldName': 'file',
    'editor.upload.image.fileFieldName': 'file',
    'editor.upload.video.fileFieldName': 'file',
    'editor.upload.file.fileFieldName': 'file'
}


업로드 가능 확장자 설정

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

synapeditor.config.js
{
	'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']
}



base64 이미지 사용

'editor.upload.image.base64' 설정으로 이미지 업로드 시 base64를 사용할 것인지를 설정합니다. (기본값 = false)

true로 설정이 이미지 업로드 후 base64로 이미지가 표현됩니다.

synapeditor.config.js
{
	'editor.upload.image.base64': false,
}


자동 링크 설정

  • 링크 타입에 해당하는 텍스트 입력 후 SPACE, ENTER시 자동으로 링크가 삽입되는 기능의 사용여부를 옵션으로 설정 할 수 있습니다.
  • 'editor.autoLink' 값을 false로 설정하여 자동으로 링크가 삽입 되지 않도록 설정이 가능합니다. (기본값 true)
    • ex) WEB: http://, https://, www. + TEXT + 최상위 도메인( .com, .co.kr ... )
const synapEditorConfig = {
	//...
	/**
	 * 에디터 자동링크 사용 여부를 설정합니다.
	 */
	'editor.autoLink': true,
	//...
};
  • No labels