1. floatAboveDialog
다이얼로그, 풍선 팝업, 툴팁 등 UI 요소들이 에디터의 다른 콘텐츠 위에 최상위 레이어로 표시되며, 다른 UI 요소에 가려지지 않게 됩니다.
__editorPlugins__.html 설정
_editorPlugins_.html
<!-- SynapEditor 객체가 존재해야 적용할 수 있기 때문에 에디터 스크립트 파일 아래에 include 해야 합니다 -->
<!-- CSS -->
<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">
CSS 및 스크립트 추가 방법
- HTML 파일에 <script> 코드 블록을 동일한 구조로 추가하여 스타일을 설정할 수 있습니다.
- 예를 들어, editor.html, index.html 등의 파일에서도 아래와 같은 방식으로 설정을 적용할 수 있습니다.
editor.html 설정 예시
editor.html
<!-- SynapEditor 객체가 존재해야 적용할 수 있기 때문에 에디터 스크립트 파일 아래에 include 해야 합니다 -->
<link rel='stylesheet' href='synapeditor.min.css의 url'>
<script>
const rootHead = window.top.document.head; // 최상위 head
const hrefs = [
'externalContainerStyle.css의 url',
'shapeEditor.min.css의 url',
'webAccessibilityChecker.min.css의 url',
'webSpellChecker.min.css',
'personalDataProtection.min.css의 url',
'characterPicker.min.css의 url',
'documentComparison.min.css의 url',
'ocr.min.css의 url'
];
hrefs.forEach((href) => {
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = href;
rootHead.appendChild(link);
});
</script>
config 설정
'editor.external.container.selector'
/**
* 외부 컨테이너가 위치할 Element를 찾는 Selector를 설정합니다.
*/
'editor.external.container.selector': ''