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