Page History

...

다이얼로그, 풍선 팝업, 툴팁 등 UI 요소들이 에디터의 다른 콘텐츠 위에 최상위 레이어로 표시됩니다.  다이얼로그, 풍선 팝업, 툴팁이 표시되며, 다른 UI 요소에 가려지지 않으며, 사용자 경험을 방해하지 않게 됩니다.

 __editorPlugins__.html 설정

...

• HTML 파일에 <script> 코드 블록을 동일한 구조로 추가하여 스타일을 설정할 수 있습니다.
• 예를 들어, editor.html, index.html 등의 파일에서도 아래와 같은 방식으로 설정을 적용할 수 있습니다.

editor.html 설정 예시

<!-- SynapEditor 객체가 존재해야 적용할 수 있기 때문에 에디터 스크립트 파일 아래에 include 해야 합니다 -->

<link rel='stylesheet' href='synapeditor.min.css의 url'>
<script>
    const rootHead = window.top.document.head; // 최상위 head
    const hrefs = [
        'synapeditor.min.css의 url',
        'externalContainerStyle.css의 url',
        'webAccessibilityCheckershapeEditor.min.css의 url',
        'shapeEditorwebAccessibilityChecker.min.css의 url',
        'webSpellChecker.min.css의 urlcss',
        '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 설정

...

Code Block
language xml theme Emacs title 'editor.htmlexternal.container.selector' linenumbers true
<!-- SynapEditor 객체가 존재해야 적용할/** 수 있기 때문에 에디터 스크립트 파일* 아래에외부 include컨테이너가 해야위치할 합니다Element를 -->찾는 <link rel='stylesheet' href='synapeditor.min.css의 url'> <script>Selector를 설정합니다. 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>editor.external.container.selector': ''