1. floatAboveDialog
다이얼로그 , 풍선 팝업, 툴팁과 같은 UI 요소들이 에디터의 다른 콘텐츠 위에서 최상위 head에 표시되며에디터 위에 생성되며, 다른 UI 요소에 가려지지 않게 됩니다.
기존에는 이러한 UI 요소들이 에디터 내의 컨테이너에 위치하여 내에서 관리되어 에디터 내부에서만 이동할 수 있었지만이동이 가능했지만, 에디터 밖에 외부 컨테이너를 생성함으로서 관리를 함으로서 에디터를 벗어나도 자유롭게 움직일 수 있습니다.
이로 인해, 다이얼로그, 풍선 팝업, 툴팁에 관련된 CSS 스타일을 별도로 설정하고, 이를 최상위 head에 적용해야 설정해야 합니다.
CSS 및 스크립트 추가 방법
...
'editor.external.container.selector' 설정으로 외부 컨테이너가 다이얼로그 등 UI가 위치할 Element를 찾는 Selector를 지정합니다.
| Info |
|---|
Selector를 지정하지 않으면 최상위에 최상위 요소인 <body> 아래에 위치하게 됩니다. |
| Code Block | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
var synapEditorConfig = {
...
/**
* 외부 컨테이너가 위치할 Element를 찾는 Selector를 설정합니다.
*/
'editor.external.container.selector': '';
...
} |
...
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
{
'editor.external.container.selector': '#test#synapeditorUI';
} |
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
<body> ... <editor></editor> <div class="se-external-container-wapper"> <div id="#testsynapeditorUI" class="se se-external-container"></div> <div class="se-balloon-container"></div> <div class="se-dialog-container"></div> <div class="se-tooltip-container"></div> </div> </body> |