The initialization of the Synap Editor is simple as shown below.
new SynapEditor('synapEditor');
Additional preferences can be specified as arguments when creating the editor object, or through a separate configuration file.
Configuring the Editor on object creation
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 });
Configuring the Editor via separate config file
설정 객체 사용방법: 스크립트 추가, 에디터 초기화 config를 설정합니다.
<!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 형태로 설정하며, 사용하지 않는 설정 제거시 기본설정으로 동작합니다.
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'] }
Setting Lincense
Set the path or license object for the license file.
The 'editor.license' setting is required, and the editor will not work if it is not set.
synapeditor.config.js
{ 'editor.license': '/resource/license.json' }
synapeditor.config.js
{ 'editor.license': { 'company': 'SynapSoft', 'key': [ 'licenseKey' ] } }
Sample initialization result
If the parameters above are used, the Editor will look like this: