View Source

다이얼로그 , 풍선 팝업, 툴팁과 같은 UI 요소들이 에디터 위에 생성되며, 다른 UI 요소에 가려지지 않게 됩니다.

기존에는 이러한 UI 요소들이 에디터 내에서 관리되어 에디터 내부에서만 이동이 가능했지만, 에디터 밖에 관리를 함으로서 에디터를 벗어나도 자유롭게 움직일 수 있습니다.

이로 인해, 다이얼로그, 풍선 팝업, 툴팁에 관련된 CSS 스타일을 별도로 설정해야 합니다.

사이냅 에디터 문서 > style 설정 > 화면 캡처 2024-12-24 105745.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' 설정으로 다이얼로그 등 UI가 위치할 Element를 찾는 Selector를 지정합니다.

Selector를 지정하지 않으면 최상위 요소인 <body> 아래에 위치하게 됩니다.

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

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

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