Skip to content
Skip to breadcrumbs
Skip to header menu
Skip to action menu
Skip to quick search
Synap Editor Documentation
Spaces
Hit enter to search
Help
Online Help
Keyboard Shortcuts
Feed Builder
What’s new
Available Gadgets
About Confluence
Log in
사이냅 에디터 문서
Space shortcuts
사이냅 에디터 데모
Page tree
Browse pages
Configure
Space tools
A
t
tachments (94)
Page History
Page Information
Resolved comments
View in Hierarchy
View Source
Export to PDF
Export to Word
Export to PDF
Export to Word
Dashboard
사이냅 에디터 문서
설치 및 설정
Skip to end of banner
Jira links
Go to start of banner
환경설정
Skip to end of metadata
Created by
Kwon JongPyo
, last modified on
Aug 22, 2019
Go to start of metadata
릴리즈 2.2.0 이상
에디터 초기화
객체 생성을 통한 환경설정
독립적인 config file을 이용한 환경설정
Textarea를 이용한 에디터 초기화
라이센스 설정
초기화 예시
기본 UI 설정
툴바 설정
설정방법
기본설정
전체기능사용
아이콘 및 기능설명
플러그인
메뉴 설정
메뉴 사용여부 설정
메뉴 구성
예시
언어 설정
기본언어 설정
언어 강제설정
언어팩 적용
테마 설정
테마 적용하기
제공 테마
기본
dark-gray
컬러아이콘 적용
Iframe mode
설정방법
주의사항
Synap EditorHolistic Rich Text Editor"; var editor = new SynapEditor('synapEditor', synapEditorConfig, html);]]>
Synap EditorHolistic Rich Text Editor'; // editor 초기화 완료시 실행 (async) function SynapEditorInitialized(e) { var editor = e.editor; editor.openHTML(html); } // editor 초기화 완료시 실행 (sync) function SynapEditorInitializedSync(e) { var editor = e.editor; editor.openHTML(html); } new SynapEditor(editorId, editorConfig);]]>
Synap EditorHolistic Rich Text Editor'; var eventListeners = { initialized: function (e) { var editor = e.editor; editor.openHTML(html); }, initializedSync: function (e) { var editor = e.editor; editor.openHTML(html); } }; new SynapEditor(editorId, editorConfig, html, eventListeners);]]>
체험하기
Document mode
설정방법
체험하기
컨텐츠 영역 너비 고정
상세 UI 설정
글꼴 설정
글꼴 설정
일반
객체 형태
언어별 글꼴 설정
글꼴 크기 설정
글꼴 크기 설정
글꼴 크기 단위 설정
포커스 지정
버튼 & 아이콘 크기 설정
버튼 크기 설정
아이콘 크기 설정
에디터 리사이즈 설정
가로 스크롤 사용
편집 가이드 사용
툴바영역 고정
풍선팝업 설정
사용방법
풍선팝업 설정 예시
기본값
표 편집 풍선팝업 설정
표 편집 핸들 설정
레이어 편집 핸들 설정
표 풍선팝업 노출 설정
줄간격크기 설정
줄간격크기 설정
글머리 번호 설정
글머리 번호 설정
다단계 글머리번호 설정
다단계 글머리번호 설정
컬러팔레트 설정
설정방법
에디터를 컨텐츠 높이에 맞춤
바로 삽입 설정
커스텀 글머리 설정
커스텀 글머리 설정
글머리 번호 종류
적용 예시
단축키 표시 설정
업로드 및 임포트 설정
Import API 및 Upload API 설정
필수 스크립트
설정
설정예시
임포트/업로드 가능 확장자 설정
임포트시 항상 새로넣기
이미지 업로드시 미리보기 설정
base64 이미지 사용
설정
설정 예시
editor.upload.image.base64 결과 예시
editor.image.base64.maxSize 결과 예시
FormData의 File Field Name 설정
DOC, DOCX, HWP 부분 임포트 설정
슬라이드 부분 임포트 설정
임포트 영역 선택 다이얼로그 슬라이드 번호 입력 예시
셀 임포트 기본 영역 설정
설정 예시
셀 임포트시 숨겨진 글자 표시하기
임포트 시 편집 영역 크기 유지하기
기타 설정
HTML 불러오기 설정
Yellow릴리즈 2.5.0 이상
불필요한 DIV 제거
중복 ID 알림 설정
HTML Custom tag를 Div tag로 변환
Yellow릴리즈 2.9.0 이상
Custom tag를 Div tag로 변환
HTML 주석 유지
설정방법
소스편집 결과
HTML display none 노드 유지
설정방법
글머리 렌더링
설정
설정예시
반응형 객체로 바로 삽입
설정방법
반응형보기 설정
1. 반응형보기 환경설정
1.1. getPublishingHtml() API 사용시 옵션 설정
1.2. 외부 CSS에 반응형보기 지원을 위한 스타일 추가
2. 에디터에서 본문 편집시 반응형보기 설정방법
2.1. 이미지
2.2. 표
부분 편집 제한
지정 가능한 대상 Element
지정방법
소스코드에서 지정
API 사용
동작 규칙
체험하기
사용자정의 스타일
사용자정의 문단스타일
사용자정의 런스타일
알림 메시지 설정
Unload 메세지
자동 리스트 삽입
자동 링크 삽입
자동 링크 target 기본 값 설정
자동 저장
컨텐츠 필터
HTML TAG
<iframe> 태그 삽입 허용
<embed> 태그 삽입 허용
<object> 태그 삽입 허용
<link> 태그 삽입 허용
HTML SCRIPT & EVENT ATTRIBUTES
옵션 사용으로 발생할 수 있는 보안상의 문제는 당사 책임 범위에 포함되지 않습니다.
<script> 태그 삽입 허용
이벤트 속성(Attribute) 삽입 허용
템플릿
설정
설정예시
편집 기본 스타일 지정
스타일 지정 방법
기본 스타일 지정 예시
기본 스타일 지정 결과
지원 Model Element Type
표 고정너비 삽입
최근 사용한 색 목록 저장
접근성 설정 - 보조 메세지
보조 메세지가 안내되는 상황 및 내용
VoiceOver를 사용했을 때에 대한 예시
마우스로 문단을 클릭했을 때
캐럿을 위/아래로 이동했을 때
캐럿을 왼쪽/오른쪽으로 이동했을 때
셀렉션 했을 때
셀렉션을 해제 했을 때
전체 선택을 했을 때
캐럿 상태로 텍스트를 삭제 했을 때
셀렉션 상태로 텍스트를 삭제 했을 때
툴팁 위치 저장 설정
활용 예
툴팁 위치 변경하기 커스텀 플러그인
에디터 툴바 영역에 플러그인 버튼 달기
결과
에디터 외부로 포커스 이동
설정
에디터 이전 Element 설정
에디터 다음 Element 설정
설정 예시
No labels
Overview
Content Tools
{"serverDuration": 214, "requestCorrelationId": "3c18429bdcd387a5"}