에디터 외부에서 다이얼로그, 벌룬(풍선 팝업), 툴팁 등의 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 리스트


'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'
    ]
}


적용 예시

<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 미사용