Installation

Available in Release 2.2.0 and above.

Table of Contents

  1. Installation
  2. Configuration
  3. Initializing the Editor and Saving Content
  4. Saving and Loading Editor Content
  5. Applying Plugins and External Modules
  6. Import and Upload API Configuration
  7. Import Feature Runtime Environment
  8. Applying Styles When Using Iframe
  9. Content Security Policy (CSP) Setup Guide

1. Installation

Synap Editor installation files are organized as follows:

PackageFile Name
Synap Editor + Import ModuleSynapEditor_3.x.x.zip
Fonts for metafile conversionfonts.zip

Copy the installation files to a desired path and extract them.

In this guide, files are copied to /workspace and extracted there. The guide also assumes /workspace is the WEB ROOT.

After extracting SynapEditor_3.x.x.zip, the following directory structure is created:

<table> <thead> <tr><th>Path</th><th>Contents</th><th>Description</th></tr> </thead> <tbody> <tr> <td><code>/workspace/SynapEditor_3.x.x/SynapEditor</code></td> <td><img src="파일%20압축%20해제시_1.png" alt="SynapEditor folder structure"></td> <td> <code>externals</code> : External modules directory<br> <code>iframeMode</code> : iframeMode directory<br> <code>lang</code> : Language directory<br> <code>plugins</code> : Plugins directory<br> <code>theme</code> : Theme directory<br> <code>license.json</code> : License file<br> <code>synapeditor.config.js</code> : Configuration file<br><br> <strong>Release 2.13.0 and above</strong><br> <code>synapeditor.pkgd.min.js</code> and <code>synapeditor.pkgd.min.css</code> are no longer provided. Those bundled files included every plugin offered by Synap Editor. Because the bundle is large, we recommend using <code>synapeditor.min.js</code> and adding only the plugins you actually need. </td> </tr> <tr> <td><code>/workspace/SynapEditor_3.x.x/sedocConverter</code></td> <td> <strong>Windows</strong><br> <img src="파일%20압축%20해제시_2_win.png" alt="Windows import module files"><br> <strong>Linux</strong><br> <img src="파일%20압축%20해제시_2_linux.png" alt="Linux import module files"> </td> <td> Import module (executables)<br> Windows: <code>sedocConverter.exe</code> and various DLLs<br> Linux: <code>sedocConverter_exe</code> </td> </tr> </tbody> </table>

Also extract fonts.zip under /workspace:

PathDescription
/workspace/fontsFont files used to convert metafiles (wmf/emf) during document import

2. Configuration

2.1 License Configuration

Open synapeditor.config.js and specify the path to the license.json file. The path must be reachable from the browser.

// synapeditor.config.js
{
  /**
   * Specifies the path to the license file, or a license object.
   * ex) '/synapeditor/license.json'
   * ex) {
   *   'company': 'Synapsoft',
   *   'key': [
   *     'licenseKey'
   *   ]
   * }
   */
  'editor.license': 'synapeditor/license.json',
  ...
}

3. Initializing the Editor and Saving Content

Initialize the editor using the configuration file. Refer to the explanation below to initialize the editor using either a <div> or a <textarea> tag.

3.1 Using a <div> tag

3.1.1 Include the JS and CSS files using <script> and <link> tags.

For Release 3.1.2501 and above, refer to the style settings guide for the CSS include method.

<link href='SynapEditor/synapeditor.min.css' rel='stylesheet' type='text/css'>
<script src='SynapEditor/synapeditor.config.js'></script>
<script src='SynapEditor/synapeditor.min.js'></script>

3.1.2 Include the document-import related modules.

To enable importing xlsx, docx, hwp, and similar documents, include the SEDocModelParser and SEShapeManager modules located under the editor package's externals folder.

<script src="externals/SEDocModelParser/SEDocModelParser.min.js"></script>
<script src="externals/SEShapeManager/SEShapeManager.min.js"></script>

3.1.3 Create a new Synap Editor instance using a <div> tag.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
  <title>Synap Editor | Unlimited Rich Text Editor</title>

  <link href="SynapEditor/synapeditor.min.css" rel="stylesheet" type="text/css">
  <script src="SynapEditor/synapeditor.config.js"></script>
  <script src="SynapEditor/synapeditor.min.js"></script>
  <script>
    function initEditor() {
      var se = new SynapEditor("synapEditor", synapEditorConfig);
    }
  </script>
</head>
<body onload="initEditor();">
  <div id="synapEditor" style="height:700px;"></div>
</body>
</html>

3.1.4 Save the authored content using an HTML form tag.

The example below uses jQuery to send a POST request.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
  <title>Synap Editor | Unlimited Rich Text Editor</title>
  <link href="SynapEditor/synapeditor.min.css" rel="stylesheet" type="text/css">
  <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
  <script src="SynapEditor/synapeditor.config.js"></script>
  <script src="SynapEditor/synapeditor.min.js"></script>
  <script>
    $(document).ready(function() {
      var se = new SynapEditor("synapEditor", synapEditorConfig);

      $('#seform').on('submit', function() {
        $('#editor').val( se.getPublishingHtml() );
        return true;
      });
    });
  </script>
</head>
<body>
  <div style="height:700px;">
    <div id="synapEditor"></div>
  </div>
  <form id="seform" name="seform" action="/save" method="post">
    <textarea id="editor" style="display:none"></textarea>
    <input type="submit" value="SAVE"/>
  </form>
</body>
</html>

3.2 Using a <textarea> tag

3.2.1 Include the JS and CSS files using <script> and <link> tags.

<link href='SynapEditor/synapeditor.min.css' rel='stylesheet' type='text/css'>
<script src='SynapEditor/synapeditor.config.js'></script>
<script src='SynapEditor/synapeditor.min.js'></script>

3.2.2 Include the document-import related modules.

To enable importing xlsx, docx, hwp, and similar documents, include the SEDocModelParser and SEShapeManager modules located under the editor package's externals folder.

<script src="externals/SEDocModelParser/SEDocModelParser.min.js"></script>
<script src="externals/SEShapeManager/SEShapeManager.min.js"></script>

3.2.3 Create a new Synap Editor instance using a <textarea> tag.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
  <title>Synap Editor | Unlimited Rich Text Editor</title>

  <link href="SynapEditor/synapeditor.min.css" rel="stylesheet" type="text/css">
  <script src="SynapEditor/synapeditor.config.js"></script>
  <script src="SynapEditor/synapeditor.min.js"></script>
  <script>
    function initEditor() {
      var se = new SynapEditor("synapEditor", synapEditorConfig);
    }
  </script>
</head>
<body onload="initEditor();">
  <div style="height:700px;">
    <textarea id="synapEditor"></textarea>
  </div>
</body>
</html>

If the textarea has content, the editor is initialized with that content. (Release 2.12.0 and above)

<table> <thead> <tr><th>Code</th><th>Result</th></tr> </thead> <tbody> <tr> <td> <pre><code>&lt;div&gt; &lt;textarea id="synapEditor"&gt;&lt;p&gt;Initializing Synap Editor.&lt;/p&gt;&lt;/textarea&gt; &lt;/div&gt;</code></pre> </td> <td><img src="textarea에%20내용이%20있을%20경우%20해당%20내용으로%20에디터가%20초기화%20됩니다.png" alt="Editor initialized with textarea content"></td> </tr> </tbody> </table>

3.2.4 Save the authored content using an HTML form tag.

The example below uses jQuery to send a POST request.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
  <title>Synap Editor | Unlimited Rich Text Editor</title>
  <link href="SynapEditor/synapeditor.min.css" rel="stylesheet" type="text/css">
  <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
  <script src="SynapEditor/synapeditor.config.js"></script>
  <script src="SynapEditor/synapeditor.min.js"></script>
  <script>
    $(document).ready(function() {
      var se = new SynapEditor("synapEditor", synapEditorConfig);
    });
  </script>
</head>
<body>
  <form id="seform" name="seform" action="/save" method="post">
    <div style="height:700px;">
      <textarea id="synapEditor"></textarea>
    </div>
    <input type="submit" value="SAVE"/>
  </form>
</body>
</html>

4. Saving and Loading Editor Content

4.1 Saving Editor Content

getPublishingHtml()

Retrieves the editor's content as HTML.

Use this when saving the editor's content to a database or HTML file.

var html = editor.getPublishingHtml();

4.2 Loading Editor Content

openHTML()

Displays HTML inside the editor.

Use this when displaying content from a database or HTML file in the editor.

var html = "<H1>Synap Editor</H1><P>Holistic Rich Text Editor</P>";
editor.openHTML(html);

5. Applying Plugins and External Modules

You can apply the various plugins provided by Synap Editor as shown below. For detailed information about each plugin, refer to the Plugins page.

Loading plugin files

<!-- Note: Plugin files must be included after the Synap Editor file. -->

<!-- Synap Editor file -->
<link rel="stylesheet" href="../synapeditor.min.css">
<script src="../synapeditor.min.js"></script>

<!-- Plugin file -->
<link rel="stylesheet" href="../plugins/webAccessibilityChecker/webAccessibilityChecker.min.css">
<script src="../plugins/webAccessibilityChecker/webAccessibilityChecker.min.js"></script>

Creating the plugin UI

<script>
  new SynapEditor('ID of the HTML element to initialize the editor on', {
    //...
    'editor.toolbar': [
      //...
      'webAccessibilityChecker' // To expose the button provided by the plugin in the UI, use the plugin's UI name as you would any other editor setting.
      //...
    ]
    //...
  });
</script>

Applying external modules

You can apply external modules such as CodeMirror, formulaParser, SEDocModelParser, and SEShapeManager to enable more powerful editing features.

External ModulePurpose
CodeMirrorDisplays source code more attractively and makes it easier to edit.
formulaParserExtends the editor's tables so that they can use spreadsheet (Excel-style) functions.
SEDocModelParserExtends the editor so it can import hwp, doc, docx, xls, and xlsx documents.
SEShapeManagerExtends the editor so it can import documents containing shapes and display those shapes. Required for the Shape Editor plugin.

Refer to the External Modules page for detailed application instructions.

Example of applying plugins and external modules

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
  <title>Synap Editor | Unlimited Rich Text Editor</title>

  <!-- Synap Editor -->
  <link href="SynapEditor/synapeditor.min.css" rel="stylesheet" type="text/css">
  <script src="SynapEditor/synapeditor.config.js"></script>
  <script src="SynapEditor/synapeditor.min.js"></script>

  <!-- Synap Editor Plugins -->
  <!-- Shape Editor / supported from v2.8.0 -->
  <script src="SynapEditor/plugins/shapeEditor/shapeEditor.min.js"></script>
  <link rel="stylesheet" href="synapeditor/plugins/shapeEditor/shapeEditor.min.css">
  <!-- Personal Data Protection -->
  <script src="SynapEditor/plugins/personalDataProtection/personalDataProtection.min.js"></script>
  <link rel="stylesheet" href="synapeditor/plugins/personalDataProtection/personalDataProtection.min.css">
  <!-- Special Characters / Emoji -->
  <script src="SynapEditor/plugins/characterPicker/characterPicker.min.js"></script>
  <link rel="stylesheet" href="synapeditor/plugins/characterPicker/characterPicker.min.css">
  <!-- Web Accessibility Checker -->
  <script src="SynapEditor/plugins/webAccessibilityChecker/webAccessibilityChecker.min.js"></script>
  <link rel="stylesheet" href="synapeditor/plugins/webAccessibilityChecker/webAccessibilityChecker.min.css">
  <!-- Photo Editor -->
  <script src="SynapEditor/plugins/tuiImageEditor/tuiImageEditor.min.js"></script>
  <link rel="stylesheet" href="synapeditor/plugins/tuiImageEditor/tuiImageEditor.min.css">
  <!-- Horizontal Line Extension -->
  <script src="SynapEditor/plugins/horizontalLineExtension/horizontalLineExtension.min.js"></script>
  <link rel="stylesheet" href="synapeditor/plugins/horizontalLineExtension/horizontalLineExtension.min.css">
  <!-- Quote Extension -->
  <script src="SynapEditor/plugins/quoteExtension/quoteExtension.min.js"></script>
  <link rel="stylesheet" href="synapeditor/plugins/quoteExtension/quoteExtension.min.css">

  <!-- Synap Editor Externals -->
  <script type="text/javascript" src='SynapEditor/externals/formulaParser/formula-parser.min.js'></script>
  <!-- supported from v2.8.0 -->
  <script type="text/javascript" src='SynapEditor/externals/SEDocModelParser/SEDocModelParser.min.js'></script>
  <!-- supported from v2.8.0 -->
  <script type="text/javascript" src='SynapEditor/externals/SEShapeManager/SEShapeManager.min.js'></script>

  <!-- CodeMirror -->
  <script type="text/javascript" src='SynapEditor/externals/codeMirror/codemirror.min.js'></script>
  <script type="text/javascript" src="SynapEditor/externals/codeMirror/xml.min.js"></script>
  <link rel='stylesheet' href='SynapEditor/externals/codeMirror/codemirror.min.css'>

  <script>
    function initEditor() {
      var se = new SynapEditor("synapEditor", synapEditorConfig);
    }
  </script>
</head>
<body onload="initEditor();">
  <div style="height:700px;">
    <div id="synapEditor"></div>
  </div>
</body>
</html>

// synapeditor.config.js
{
  'editor.toolbar': [
    //...,
    'personalDataProtection',
    'specialCharacter', 'emoji',
    'tuiImageEditor',
    'WebAccessibilityChecker',
    //...
  ],
}

6. Import and Upload API Configuration

To handle image, video, and file uploads as well as document imports (doc, docx, hwp, xls, xlsx), configure the import and upload API paths in the configuration file.

The required APIs (/importDoc, /uploadImage, /uploadVideo, /uploadFile) must be implemented on the back-end. Refer to the Server Integration manual for details.

// synapeditor.config.js
{
  'editor.import.api': '/importDoc',
  'editor.upload.image.api': '/uploadImage',
  'editor.upload.video.api': '/uploadVideo',
  'editor.upload.file.api': '/uploadFile',
  ...
}

For details on other configuration such as menus and toolbars, refer to the Configuration page.

7. Import Feature Runtime Environment

The runtime environment and minimum specifications for the import feature are as follows:

  • Linux distributions with kernel 2.6.32 or higher (RedHat Enterprise, Fedora, Ubuntu, CentOS, etc.) — GLIBC 2.14 or higher
  • Windows 10 or higher
  • Microsoft Windows Server 2012 / 2012 R2 / 2016

8. Applying Styles When Using Iframe

Available in Release 3.1.2501 and above, and in Release 2.19.2501 and above.

Because UI elements such as dialogs, balloon popups, and tooltips are now rendered outside the editor's main container (under <body>), separate CSS styling is required for these elements.

For detailed configuration, refer to the style settings page.

Example: applying CSS via script

// Apply CSS by adding a script when initializing the editor
initEditor = () => {
  ...
  const paths = [
    'url of synapeditor.min.css',
    'url of externalStyle.css',
    'url of shapeEditor.min.css',
    'url of webAccessibilityChecker.min.css',
    'url of webSpellChecker.min.css',
    'url of personalDataProtection.min.css',
    'url of characterPicker.min.css',
    'url of documentComparison.min.css',
    'url of formEditor.min.css',
    'url of forbiddenWordDetection.min.css',
    'url of ocr.min.css'
  ];

  const topDocument = window.top.document;
  paths.forEach(function (cssFile) {
    if (topDocument.querySelector(`[href=' + cssFile + ']`)) {
      return;
    }

    var link = topDocument.createElement('link');
    link.rel = 'stylesheet';
    link.href = cssFile;
    topDocument.head.appendChild(link);
  });
  ...
  window.editor = new SynapEditor(editorId, that.editorConfig, html, eventListener);
}

9. Content Security Policy (CSP) Setup Guide

Because of the nature of a rich-text editor, Synap Editor dynamically generates inline styles, inline scripts, and data-URL-based styles during editing.

As a result, if you set CSP restrictively (e.g. style-src 'self', script-src 'self'), the browser will block execution of those resources, and the editor may not function correctly or some features may be limited.

For the editor to work correctly, the following CSP settings are required:

Content-Security-Policy:
  style-src 'self' 'unsafe-inline' data:;
  script-src 'self' 'unsafe-inline' 'unsafe-eval';

How to Apply

It is generally recommended to set CSP via HTTP response headers on the server.

Content-Security-Policy: style-src 'self' 'unsafe-inline' data:; script-src 'self' 'unsafe-inline' 'unsafe-eval';

For test environments, you can also apply it via the HTML <meta> tag.

<meta http-equiv="Content-Security-Policy"
      content="style-src 'self' 'unsafe-inline' data:; script-src 'self' 'unsafe-inline' 'unsafe-eval'">

Notes

  • The above settings represent the minimum recommended configuration required by the rich-text editor.
  • The script-src 'self' setting blocks script execution from external domains.
  • Depending on your service environment, additional security policies (input validation, server-side validation, etc.) are recommended.