...
이벤트 종류
...
| 새문서를 하기 전 발생합니다. |
| afterNewDocument | | 새문서를 한 이후 발생합니다. |
| onSelection | | 캐럿 이동 및 셀렉션 확장 등의 셀렉션 동작을 할 때 발생합니다. |
| beforeCopy | | Status |
|---|
| |
|---|
| colour | Grey |
|---|
| title | 릴리즈 2.11.0 이상 |
|---|
|
| 에디터편집영역에서복사를했을때복사하기전에발생합니다. 이이벤트를통해복사된 HTML의내용을확인하거나, 복사될 HTML을설정할수있습니다. |
| beforePaste | | Status |
|---|
| |
|---|
| colour | Grey |
|---|
| title | 릴리즈 2.10.0 이상 |
|---|
|
|
...
| 붙여넣기 전에 발생합니다. |
| afterPaste | | Status |
|---|
| |
|---|
| colour | Grey |
|---|
| title | 릴리즈 2.10.0 이상 |
|---|
|
| 붙여넣기 후 발생합니다. |
| afterEdit | | Status |
|---|
| |
|---|
| colour | Grey |
|---|
| title | 릴리즈 2.10.0 이상 |
|---|
|
| 문서를 편집한 이후 발생합니다. |
| autoAction | | Status |
|---|
| |
|---|
| colour | Grey |
|---|
| title | 릴리즈 2.20.2509 이상 |
|---|
|
| Status |
|---|
| |
|---|
| colour | Yellow |
|---|
| title | 릴리즈 3.2.2509 이상 |
|---|
|
| 사용자 정의 입력 액션 실행 시 발생합니다. |
이벤트 등록
API 사용
editor.setEventListener()
이벤트를 등록 할 때 사용하는 API입니다.
| Code Block |
|---|
|
editor.setEventListener('이벤트이름', function(e) {
}); |
에디터 초기화시 등록
| Code Block |
|---|
|
var editorId = 'synapEditor';
var editorConfig = {};
var html = '';
var function SynapEditorInitialized(e)eventListeners = {
// editor 초기화 완료시 실행 (async)
var editor = e.editor;
}
'이벤트이름': function SynapEditorInitializedSync(e) {
// editor 초기화 완료시 실행 (sync)
var editor = e.editor;
}
}
};
new SynapEditor(editorId, editorConfig, html, eventListeners); |
...
함수방식 사용
| Code Block |
|---|
|
var editorId = 'synapEditor';
var editorConfig = {};
var html = '';
var
eventListeners =function SynapEditor이벤트이름(e) {
// initialized:이벤트 function이름은 (e)첫자가 {대문자
// ex: initialized => //SynapEditorInitialized
editor 초기화 완료시 실행 (async)
var editor = e.editor;
},
initializedSync: function (e) {
// editor 초기화 완료시 실행 (sync)
var editor = e.editor;
// ex: beforeUploadImage => SynapEditorBeforeUploadImage
}
new SynapEditor(editorId, editorConfig, html); |
이벤트 해제
API 사용
editor.removeEventListener()
등록한 이벤트를 제거 할 때 사용하는 API 입니다.
| Code Block |
|---|
|
editor.removeEventListener('이벤트이름'); |
함수로 전달되는 객체 형태
| Code Block |
|---|
|
{
editor: {에디터 객체}, // 에디터
eventType: 'initialized', // 이벤트 이름
cancelable: false, // 이벤트 취소 가능 여부
returnValue: null, // 이벤트 취소 여부
....
} |
- editor: 이벤트가 발생한 에디터입니다.
- eventType: 이벤트 이름입니다.
- cancelable: 이벤트 취소 가능 여부입니다.
- returnValue: 이벤트 취소가 가능한 이벤트의 경우 (cancelable: true) , false를 전달하여 이벤트 진행을 취소할 수 있습니다.
이벤트 진행 취소
cancelable이 true인 경우, returnValue를 false로 설정하면 이벤트 진행을 취소할 수 있습니다.
| Code Block |
|---|
|
var editorId = 'synapEditor';
var editorConfig = {};
var html = '';
var eventListeners = {
'beforeUploadImage': function (e) {
e.returnValue = false; // 업로드가 더이상 진행되지 않습니다
}
};
new SynapEditor(editorId, editorConfig, html, eventListeners); |
함수로 전달되는 객체 형태
위 코드에서 사용되는 파라메터 e의 형식
| Code Block |
|---|
|
{
editor: {에디터 객체},
eventType: 'initialized'
} |