스타일 설정

3.1.2501 버전부터 지원 및 2.19.2501 버전부터 지원에서 사용 가능합니다.

이전에 다이얼로그, 풍선팝업, 툴팁과 같은 UI 요소들은 에디터 내부에서 관리되었으며, 에디터의 경계 내에서만 이동할 수 있었습니다.

이 요소들은 이제 에디터 외부에서 관리되며 에디터 영역을 넘어 자유롭게 이동할 수 있습니다.

결과적으로, 이러한 요소와 관련된 CSS 스타일은 별도로 구성해야 합니다.

표준 모드	Iframe	Iframe 모드

Iframe 모드는 설정을 통해 활성화할 수 있습니다. Iframe 모드를 참고합니다.

CSS 추가 방법

HTML 파일에 <link> 태그를 삽입하여 CSS 스타일을 추가할 수 있습니다.

예를 들어, 아래와 같이 editor.html 또는 index.html과 같은 파일에 적용합니다.

예시: 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">

예시: index.html

synapeditor.min.css가 설정되지 않은 경우, 문서 비교, 임포트, Word 미리보기의 스타일이 적용되지 않습니다.

위와 같이, synapeditor.min.css는 최상위 <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">

예시: 스크립트를 통한 CSS 적용

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

구성

editor.external.container.selector를 사용하여 다이얼로그 및 기타 UI 요소가 배치될 요소를 식별하는 선택자를 지정합니다.

선택자가 지정되지 않은 경우, 이러한 요소들은 기본적으로 최상위 <body> 요소 아래에 배치됩니다.

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

선택자 예제

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

결과 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>