Style Settings

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

Previously, UI elements such as dialogs, balloon popups, and tooltips were managed inside the editor, and could only move within the editor's bounds.

These elements are now managed outside the editor and can move freely beyond the editor area.

As a result, CSS styles related to these elements must be configured separately.

<table> <tr> <td><img src="1.png" alt="Standard mode"></td> <td><img src="2.png" alt="Iframe"></td> <td><img src="3.png" alt="Iframe mode"></td> </tr> </table>
ModeDescription
Standard modeThe editor lives inside a <div> tag.
IframeThe editor lives inside an <iframe>.
Iframe modeThe editor lives inside an <iframe>, and the editing area is also located inside that <iframe>.

Iframe mode can be enabled via configuration. See Iframe mode.

How to Add the CSS

You can add CSS styles by inserting <link> tags into your HTML file.

For example, apply them in files such as editor.html or index.html as shown below.

Example: editor.html

<!-- The SynapEditor object must exist for these styles to take effect, so include them after the editor script files. -->

<link rel="stylesheet" href="../synapeditor.min.css">

Example: index.html

If synapeditor.min.css is not configured, styles for Document Comparison, Import, and Word preview will not be applied.

As shown above, synapeditor.min.css must be set in the top-level <head>.

<link rel="stylesheet" href="../synapeditor.min.css">

<!-- CSS related to dialogs, balloon popups, and tooltips -->
<link rel="stylesheet" href="url of externalStyle.css">
<link rel="stylesheet" href="url of shapeEditor.min.css">
<link rel="stylesheet" href="url of webAccessibilityChecker.min.css">
<link rel="stylesheet" href="url of webSpellChecker.min.css">
<link rel="stylesheet" href="url of personalDataProtection.min.css">
<link rel="stylesheet" href="url of characterPicker.min.css">
<link rel="stylesheet" href="url of documentComparison.min.css">
<link rel="stylesheet" href="url of formEditor.min.css">
<link rel="stylesheet" href="url of forbiddenWordDetection.min.css">
<link rel="stylesheet" href="url of ocr.min.css">

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);
}

Configuration

Use editor.external.container.selector to specify the selector that identifies the element where dialogs and other UI elements will be placed.

If no selector is specified, these elements are placed under the top-level <body> element by default.

// synapeditor.config.js
var synapEditorConfig = {
  ...
  /**
   * Specifies the selector that identifies the element where the external container will be placed.
   */
  'editor.external.container.selector': ''
  ...
}

Selector example

{
  'editor.external.container.selector': '#synapeditorUI'
}

Resulting DOM

<body>
  ...
  <editor></editor>
  <div id="synapeditorUI">
    <div class="se-external-container-wapper">
      <div id="editorId_container" class="se se-external-container">
        <div class="se-balloon-container"></div>
        <div class="se-dialog-container"></div>
        <div class="se-tooltip-container"></div>
      </div>
    </div>
  </div>
</body>