...
에디터 외부에서 다이얼로그, 벌룬(풍선 팝업), 툴팁 등의 UI 요소를 관리하는 경우, Shadow DOM을 사용하여 외부 CSS로부터 UI를 보호하고 독립적인 스타일 환경을 제공하는 옵션입니다.
config 설정하기
외부 컨테이너에 생성되는 다이얼로그·벌룬·툴팁 등의 UI 요소가 정상적으로 표시되도록 필요한 CSS 파일을 styleUrls 옵션에 명시합니다.
이 목록에 등록된 CSS는 Shadow DOM 내부로 로드되어 외부 스타일과 격리된 상태에서 적용됩니다.
※ Shadow DOM은 외부 페이지의 CSS를 차단하므로, UI 표시를 위해 필요한 CSS는 반드시 styleUrls에 모두 포함해야 합니다.
Key | Type | 설명 |
|---|---|---|
enable | boolean | Shadow DOM 모드 설정 여부 |
style.urls | string[] | Shadow DOM 내부에 추가할 스타일 URL 리스트 |
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
'editor.external.container.enableShadowDOM': {
enable: true,
style.urls: [
'synapeditor.min.css의 url',
'externalStyle.css의 url',
'plugins/webAccessibilityChecker/webAccessibilityChecker.min.css의 url',
'plugins/shapeEditor/shapeEditor.min.css의 url',
'plugins/webSpellChecker/webSpellChecker.min.css의 url',
'plugins/personalDataProtection/personalDataProtection.min.css의 url',
'plugins/characterPicker/characterPicker.min.css의 url',
'plugins/documentComparison/documentComparison.min.css의 url',
'plugins/formEditor/formEditor.min.css의 url',
'plugins/forbiddenWordDetection/forbiddenWordDetection.min.css의 url',
'plugins/ocr/ocr.min.css의 url',
'themes/dark-gray.css의 url'
]
} |
적용 예시
- 아래 CSS를 주입했을 경우 옵션 사용 예시
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
<style>
.se-external-container {
background-color: #ff6b6b !important;
color: white !important;
padding: 10px !important;
border: 3px solid #4ecdc4 !important;
border-radius: 8px !important;
font-weight: bold !important;
text-align: center !important;
margin: 10px !important;
}
</style> |
shadowDOM 사용 | shadowDOM 미사용 |
|---|---|
|
|
