Editor Initialization

Initializing Synap Editor is as simple as creating a new instance:

new SynapEditor('synapEditor');

Additional configuration can be provided as a constructor argument when creating the SynapEditor instance, or via a separate configuration file.

Configuring via 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 via an Independent Config File

How to use the config object: add the script and configure the editor initialization 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>

The default Synap Editor config object looks like the following.

Settings use a key: value form. If an option is omitted, its default value is used.

// 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'
  ]
}

Initializing the Editor Using a Textarea

You can also initialize the editor using an HTML <textarea> element, as shown below:

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

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

License Configuration

Set the path to the license file, or set a license object directly.

editor.license is a required setting. If it is not configured, the editor will not run.

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

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

Initialization Example

With the parameters above applied, Synap Editor appears as shown below.

Editor initialization example