기존에는 다이얼로그, 풍선 팝업, 툴팁 툴팁과 같은 UI 요소들이 에디터 안에서 관리되어, 에디터 내부에서만 이동할 수 있었습니다.
이제 이러한 요소들이 에디터 밖에서 외부에서 관리되면서, 에디터 영역을 벗어나도 자유롭게 이동할 수 있습니다.
이에 따라, 이 요소들과 관련된 CSS 스타일을 별도로 설정해야 합니다.
CSS 및 스크립트 추가 방법
- HTML 파일에 <script> 코드 블록을 동일한 구조로 <link>태그를 추가하여 스타일을 설정할 수 있습니다.
- 예를 들어, editor.html, index.html 등의 파일에서도 파일에 아래와 같은 방식으로 설정을 적용할 수 있습니다적용합니다.
editor.html 설정 예시
| Code Block | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
<!-- 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"> |
...
'editor.external.container.selector' 설정으로 다이얼로그 등 UI가 위치할 Element를 찾는 Selector를 지정합니다.
| Info |
|---|
Selector를 지정하지 않으면, 기본적으로 최상위 요소인 <body> 아래에 위치하게 됩니다. |
...