The initialization of the Synap Editor is Initializing SynapEditor is as simple as shown the below.
| Code Block | ||||
|---|---|---|---|---|
| ||||
new SynapEditor('synapEditor'); |
Additional preferences can be specified as arguments when set as an element while creating the editor Editor object, or through a separate configuration file.
...
Configuration through Object Creation
| Code Block | ||||
|---|---|---|---|---|
| ||||
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
...
Configuration via Separate Config File
How to use configuring object: Add script and set initializing 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 형태로 설정하며, 사용하지 않는 설정 제거시 기본설정으로 동작합니다The following script is the Synap Editor Basic configuration object.
It is set in the form of key and value, and operates as the default setting removing unused settings are removed.
| 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']
}
|
Setting
...
License
Set the path of the license file or designate the license object for the license file.
The 'editor.license' setting is required, and the editor Editor will not work if it is not set.
...
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
{
'editor.license': {
'company': 'SynapSoft',
'key': [
'licenseKey'
]
}
}
|
Sample
...
Initialization Result
If the parameters above are usedapplied, the Editor will look like this:
...