사이냅 에디터 문서
Space shortcuts
Page tree
Skip to end of metadata
Go to start of metadata

릴리즈 3.1.2501이상

기존에는 다이얼로그, 풍선 팝업, 툴팁과 같은 UI 요소들이 에디터 안에서 관리되어, 에디터 내부에서만 이동할 수 있었습니다.

이제 이러한 요소들이 에디터 외부에서 관리되면서, 에디터 영역을 벗어나도 자유롭게 이동할 수 있습니다.

이에 따라, 이 요소들과 관련된 CSS 스타일을 별도로 설정해야 합니다.

일반 mode에디터는 <div> 태그 내에 위치합니다.
Iframe에디터가 <iframe> 안에 위치합니다.
Iframe mode에디터가 <iframe> 안에 위치하며, 편집 영역이 <iframe>안쪽에 위치합니다.

Iframe mode는 config를 통해 설정이 가능합니다.

>> iframe mode 설정하기


CSS 추가 방법

  • HTML 파일에 <link>태그를 추가하여 CSS 스타일을 추가할 수 있습니다.
  • 예를 들어, editor.html, index.html 등의 파일에 아래와 같이 적용합니다.

editor.html 설정 예시

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

<link rel="stylesheet" href="../synapeditor.min.css">

index.html 설정 예시

synapeditor.min.css을 설정하지 않으면 문서 이력 비교, 임포트 및 워드 미리보기의 스타일이 적용되지 않습니다. 

  • 위의 그림과 같이 synapeditor.min.css는 최상위 haed에 설정해야 합니다.
index.html
<link rel="stylesheet" href="../synapeditor.min.css">

<!-- 다이얼로그, 풍선 팝업, 툴팁과 관련된 css의 url -->
<link rel="stylesheet" href="externalStyle.min.css의 url">
<link rel="stylesheet" href="shapeEditor.min.css의 url">
<link rel="stylesheet" href="webAccessibilityChecker.min.css의 url">
<link rel="stylesheet" href="webSpellChecker.min.css의 url">
<link rel="stylesheet" href="personalDataProtection.min.css의 url">
<link rel="stylesheet" href="characterPicker.min.css의 url">
<link rel="stylesheet" href="documentComparison.min.css의 url">
<link rel="stylesheet" href="formEditor.min.css의 url">
<link rel="stylesheet" href="forbiddenWordDetection.min.css의 url">
<link rel="stylesheet" href="ocr.min.css의 url">

config 설정

'editor.external.container.selector' 설정으로 다이얼로그 등의 UI가 위치할 Element를 찾는 Selector를 지정합니다.

Selector를 지정하지 않으면, 기본적으로 최상위 요소인 <body> 아래에 위치하게 됩니다.

synapeditor.config.js
var synapEditorConfig = {
	...
	/**
     * 외부 컨테이너가 위치할 Element를 찾는 Selector를 설정합니다.
     */
    'editor.external.container.selector': '';
	...
}
Selector 지정 예시
{
	'editor.external.container.selector': '#synapeditorUI';
}
결과 값
<body>
	...
	<editor></editor>
	<div id="synapeditorUI">
		<div class="se-external-container-wapper">
			<div id="editorId_container" class="se se-external-container">
				<div class="se-balloon-container"></div>
				<div class="se-dialog-container"></div>
				<div class="se-tooltip-container"></div>
			</div>
		</div>
	</div>
</body>
  • No labels