에디터 초기화

Synap Editor를 초기화하는 것은 새 인스턴스를 생성하는 것만큼 간단합니다:

new SynapEditor('synapEditor');

추가 설정은 SynapEditor 인스턴스를 생성할 때 생성자 인수로 제공하거나, 별도의 설정 파일을 통해 제공할 수 있습니다.

객체 생성을 통한 설정

window.editor = new SynapEditor('synapEditor', {
  'editor.license': '/resource/license.json',
  'editor.toolbar': [
    'new', 'open', '|',
    'paragraphStyleWithText', '|',
    'fontFamilyWithText', '|',
    'fontSizeWithText', '|',
    'bold', 'italic', 'underline', 'strike', '|',
    'fontColor', 'fontBackgroundColor'
  ],
  'editor.size.width': '100%',
  'editor.size.height': '100%',
  'editor.lang.default': 'en',
  'editor.menu.show': false
});

독립 설정 파일을 통한 설정

config 객체 사용 방법: 스크립트를 추가하고 에디터 초기화 config를 설정합니다.

<!DOCTYPE html>
<html lang="en">
<script src='synapeditor.config.js'></script>
<script>
  function initEditor() {
    new SynapEditor('synapEditor', synapEditorConfig);
  }
</script>
<body onload="initEditor();">
  <div id="synapEditor" style="height:700px;"></div>
</body>
</html>

기본 Synap Editor 설정 객체는 다음과 같습니다.

설정은 key: value 형태를 사용합니다. 어떤 옵션이 생략되면, 해당 옵션의 기본값이 사용됩니다.

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

텍스트 영역을 사용하여 에디터 초기화하기

아래와 같이 HTML <textarea> 요소를 사용하여 에디터를 초기화할 수도 있습니다:

<textarea id='synapEditor'>
  This is Synap Editor initialized from a textarea.
</textarea>

<script>
  new SynapEditor('synapEditor', synapEditorConfig, document.getElementById('synapEditor').value);
</script>

라이선스 설정

라이선스 파일의 경로를 설정하거나, 라이선스 객체를 직접 설정합니다.

editor.license는 필수 설정입니다. 설정되지 않으면 에디터가 실행되지 않습니다.

// synapeditor.config.js
{
  'editor.license': '/resource/license.json'
}

// synapeditor.config.js
{
  'editor.license': {
    'company': 'SynapSoft',
    'key': [
      'licenseKey'
    ]
  }
}

초기화 예제

위의 매개변수가 적용되면, Synap Editor는 아래와 같이 표시됩니다.