1. floatAboveDialog

다이얼로그 , 풍선 팝업, 툴팁과 같은 UI 요소들이 에디터의 다른 콘텐츠 위에서 최상위 head에 표시되며, 다른 UI 요소에 가려지지 않게 됩니다.

기존에는 이러한 UI 요소들이 에디터 내의 컨테이너에 위치하여 에디터 내부에서만 이동할 수 있었지만, 에디터 밖에 외부 컨테이너를 생성함으로서 에디터를 벗어나도 자유롭게 움직일 수 있습니다.

이로 인해, 다이얼로그, 풍선 팝업, 툴팁에 관련된 CSS 스타일을 별도로 설정하고, 이를 최상위 head에 적용해야 합니다.

사이냅 에디터 문서 > style 설정 > 화면 캡처 2024-12-24 091049.png

CSS 및 스크립트 추가 방법

HTML 파일에 <script> 코드 블록을 동일한 구조로 추가하여 스타일을 설정할 수 있습니다.
예를 들어, editor.html, index.html 등의 파일에서도 아래와 같은 방식으로 설정을 적용할 수 있습니다.

editor.html 설정 예시

<!-- SynapEditor 객체가 존재해야 적용할 수 있기 때문에 에디터 스크립트 파일 아래에 include 해야 합니다 -->

<link rel='stylesheet' href='synapeditor.min.css의 url'>

<!-- 다이얼로그, 풍선 팝업, 툴팁과 관련된 css의 url -->
<link rel="stylesheet" href="tuiImageEditor.min.css의 url">
<link rel="stylesheet" href="quoteExtension.min.css의 url">
<link rel="stylesheet" href="horizontalLineExtension.min.css의 url">
<link rel="stylesheet" href="forbiddenWordDetection.min.css의 url">
<link rel="stylesheet" href="formEditor.min.css의 url">
<link rel="stylesheet" href="aiWriteSupporter.min.css의 url">

config 설정

'editor.external.container.selector' 설정으로 외부 컨테이너가 위치할 Element를 찾는 Selector를 지정합니다.

Selector를 지정하지 않으면 최상위에 위치하게 됩니다.

var synapEditorConfig = {
	...
	/**
     * 외부 컨테이너가 위치할 Element를 찾는 Selector를 설정합니다.
     */
    'editor.external.container.selector': '';
	...
}

Selector 지정 예시

{
	'editor.external.container.selector': '#test';
}

<div id="#test" class="se se-external-container"></div>