...
이벤트 종류
이벤트 이름 | 버전 | 설명 |
---|
initialized | | 에디터가 초기화되었을 때 발생합니다 |
beforeUploadImage | | 이미지를 업로드 하기 전에 발생합니다 |
afterUploadImage | | 이미지 업로드가 완료된 후 발생합니다 |
beforeUploadVideo | | 비디오를 업로드 하기 전에 발생합니다 |
afterUploadVideo | | 비디오 업로드가 완료된 후 발생합니다 |
beforeUploadFile | | 파일을 업로드 하기 전에 발생합니다 |
afterUploadFile | | 파일 업로드가 완료된 후 발생합니다 |
beforeOpenDocument | | 문서를 열기 전(임포트 전) 발생합니다 |
afterOpenDocument | | 문서가 열린 후(임포트 이후) 발생합니다. |
이벤트 등록
API 사용
editor.setEventListener()
이벤트를 등록 할 때 사용하는 API입니다.
Code Block |
---|
|
editor.setEventListener('이벤트이름', function(e) {
}); |
에디터 초기화시 등록
Code Block |
---|
|
var editorId = 'synapEditor';
var editorConfig = {};
var html = '';
var eventListeners = {
'이벤트이름': function (e) {
}
};
new SynapEditor(editorId, editorConfig, html, eventListeners); |
함수방식 사용
Code Block |
---|
|
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 입니다.
Code Block |
---|
|
editor.removeEventListener('이벤트이름'); |
함수로 전달되는 객체 형태
Code Block |
---|
|
{
editor: {에디터 객체}, // 에디터
eventType: 'initialized', // 이벤트 이름
cancelable: false, // 이벤트 취소 가능 여부
returnValue: null, // 반환 값
....
} |
- editor: 이벤트가 발생한 에디터입니다.
- eventType: 이벤트 이름입니다.
- cancelable: 이벤트 취소 가능 여부입니다.
- returValue: 반환 값입니다. 이벤트 취소가 가능한 이벤트의 경우 (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); |
...
이벤트 설명
1. initialized
에디터가 초기화 되었을 때 발생합니다.
이벤트 등록: 함수방식
Code Block |
---|
|
var editorId = 'synapEditor';
var editorConfig = {};
var html = '';
function SynapEditorInitialized(e) {
// editor 초기화 완료시 실행 (async)
var editor = e.editor;
}
function SynapEditorInitializedSync(e) {
// editor 초기화 완료시 실행 (sync)
var editor = e.editor;
}
new SynapEditor(editorId, editorConfig, html); |
이벤트 등록: 에디터 초기화시 등록
Code Block |
---|
|
var editorId = 'synapEditor';
var editorConfig = {};
var html = '';
var eventListeners = {
initialized: function (e) {
var editor = e.editor;
},
initializedSync: function (e) {
var editor = e.editor;
}
};
new SynapEditor(editorId, editorConfig, html, eventListeners); |
함수로 전달되는 객체 형태
함수로 전달되는 파라미터 e의 형식
Code Block |
---|
|
{
editor: {에디터 객체},
eventType: 'initialized',
cancelable: false,
returnValue: null
} |
2. beforeUploadImage
이미지를 업로드 하기 전에 발생합니다. 이벤트 진행 취소가 가능합니다.
이벤트 등록: API 사용
Code Block |
---|
|
var editorId = 'synapEditor';
var editorConfig = {};
var html = '';
var editor = new SynapEditor(editorId, editorConfig, html);
editor.setEventListener('beforeUploadImage', function (e) {
}); |
이벤트 등록: 함수방식
Code Block |
---|
|
var editorId = 'synapEditor';
var editorConfig = {};
var html = '';
function SynapEditorBeforeUploadImage(e) {
}
new SynapEditor(editorId, editorConfig, html); |
이벤트 등록: 에디터 초기화시 등록
Code Block |
---|
|
var editorId = 'synapEditor';
var editorConfig = {};
var html = '';
var eventListeners = {
beforeUploadImage: function (e) {
}
};
new SynapEditor(editorId, editorConfig, html, eventListeners); |
함수로 전달되는 객체 형태
함수로 전달되는 파라미터 e의 형식
Code Block |
---|
|
// release 2.2.0
{
editor: SynapEditor,
eventType: "beforeUploadImage",
cancelable: true,
returnValue: null,
fileName: "filename.png", // 업로드 대상 파일 이름
isBackground: false // 배경이미지인지 여부
}
// release 2.2.1 이상
{
editor: SynapEditor,
eventType: "beforeUploadImage",
cancelable: true,
returnValue: null,
fileType: "image", // [2.2.1] 파일 타입
fileName: "filename.png",
isBackground: false,
uploadCount: 0 // [2.2.1] 업로드 중인 파일 수 (아직 업로드 되지 않은 업로드 대상 수)
} |
3. afterUploadImage
이미지 업로드가 완료된 후 발생합니다.
이벤트 등록: API 사용
Code Block |
---|
|
var editorId = 'synapEditor';
var editorConfig = {};
var html = '';
var editor = new SynapEditor(editorId, editorConfig, html);
editor.setEventListener('afterUploadImage', function (e) {
}); |
이벤트 등록: 함수방식
Code Block |
---|
|
var editorId = 'synapEditor';
var editorConfig = {};
var html = '';
function SynapEditorAfterUploadImage(e) {
}
new SynapEditor(editorId, editorConfig, html); |
이벤트 등록: 에디터 초기화시 등록
Code Block |
---|
|
var editorId = 'synapEditor';
var editorConfig = {};
var html = '';
var eventListeners = {
afterUploadImage: function (e) {
}
};
new SynapEditor(editorId, editorConfig, html, eventListeners); |
함수로 전달되는 객체 형태
함수로 전달되는 파라미터 e의 형식
Code Block |
---|
|
// release 2.2.0
{
editor: SynapEditor,
eventType: "afterUploadImage",
cancelable: false,
returnValue: null,
path: "/upload/path/filename.png", // 업로드된 경로
elementId: "se-123456-abcdefg-7890", // HTML Element Id (wapper)
isBackground: false // 배경이미지인지 여부
}
// release 2.2.1 이상
{
editor: SynapEditor,
eventType: "afterUploadImage",
cancelable: false,
returnValue: null,
fileType: "image", // [2.2.1] 파일 타입
path: "/upload/path/filename.png",
elementId: "se-123456-abcdefg-7890",
isBackground: false
} |
4. beforeUploadVideo
비디오를 업로드 하기 전에 발생합니다. 이벤트 진행 취소가 가능합니다.
이벤트 등록: API 사용
Code Block |
---|
|
var editorId = 'synapEditor';
var editorConfig = {};
var html = '';
var editor = new SynapEditor(editorId, editorConfig, html);
editor.setEventListener('beforeUploadVideo', function (e) {
}); |
이벤트 등록: 함수방식
Code Block |
---|
|
var editorId = 'synapEditor';
var editorConfig = {};
var html = '';
function SynapEditorBeforeUploadVideo(e) {
}
new SynapEditor(editorId, editorConfig, html); |
이벤트 등록: 에디터 초기화시 등록
Code Block |
---|
|
var editorId = 'synapEditor';
var editorConfig = {};
var html = '';
var eventListeners = {
beforeUploadVideo: function (e) {
}
};
new SynapEditor(editorId, editorConfig, html, eventListeners); |
함수로 전달되는 객체 형태
함수로 전달되는 파라미터 e의 형식
Code Block |
---|
|
// release 2.2.0
{
editor: SynapEditor,
eventType: "beforeUploadVideo",
cancelable: true,
returnValue: null,
fileName: "filename.mp4" // 업로드 대상 파일 이름
}
// release 2.2.1 이상
{
editor: SynapEditor,
eventType: "beforeUploadVideo",
cancelable: true,
returnValue: null,
fileType: "video", // [2.2.1] 파일 타입
fileName: "filename.mp4",
uploadCount: 0 // [2.2.1] 업로드 중인 파일 수 (아직 업로드 되지 않은 업로드 대상 수)
} |
5. afterUploadVideo
비디오 업로드가 완료된 후 발생합니다.
이벤트 등록: API 사용
Code Block |
---|
|
var editorId = 'synapEditor';
var editorConfig = {};
var html = '';
var editor = new SynapEditor(editorId, editorConfig, html);
editor.setEventListener('afterUploadVideo', function (e) {
}); |
이벤트 등록: 함수방식
Code Block |
---|
|
var editorId = 'synapEditor';
var editorConfig = {};
var html = '';
function SynapEditorAfterUploadVideo(e) {
}
new SynapEditor(editorId, editorConfig, html); |
이벤트 등록: 에디터 초기화시 등록
Code Block |
---|
|
var editorId = 'synapEditor';
var editorConfig = {};
var html = '';
var eventListeners = {
afterUploadVideo: function (e) {
}
};
new SynapEditor(editorId, editorConfig, html, eventListeners); |
함수로 전달되는 객체 형태
함수로 전달되는 파라미터 e의 형식
Code Block |
---|
|
// release 2.2.0
{
editor: SynapEditor,
eventType: "afterUploadVideo",
cancelable: false,
returnValue: null,
path: "/upload/path/filename.mp4", // 업로드된 경로
elementId: "se-123456-abcdefg-7890" // HTML Element Id (wapper)
}
// release 2.2.1 이상
{
editor: SynapEditor,
eventType: "afterUploadVideo",
cancelable: false,
returnValue: null,
fileType: 'video', // [2.2.1] 파일 타입
path: "/upload/path/filename.mp4",
elementId: "se-123456-abcdefg-7890"
} |
6. beforeUploadFile
파일을 업로드 하기 전에 발생합니다. 이벤트 진행 취소가 가능합니다.
이벤트 등록: API 사용
Code Block |
---|
|
var editorId = 'synapEditor';
var editorConfig = {};
var html = '';
var editor = new SynapEditor(editorId, editorConfig, html);
editor.setEventListener('beforeUploadFile', function (e) {
}); |
이벤트 등록: 함수방식
Code Block |
---|
|
var editorId = 'synapEditor';
var editorConfig = {};
var html = '';
function SynapEditorBeforeUploadFile(e) {
}
new SynapEditor(editorId, editorConfig, html); |
이벤트 등록: 에디터 초기화시 등록
Code Block |
---|
|
var editorId = 'synapEditor';
var editorConfig = {};
var html = '';
var eventListeners = {
beforeUploadFile: function (e) {
}
};
new SynapEditor(editorId, editorConfig, html, eventListeners); |
함수로 전달되는 객체 형태
함수로 전달되는 파라미터 e의 형식
Code Block |
---|
|
// release 2.2.0
{
editor: SynapEditor,
eventType: "beforeUploadFile",
cancelable: true,
returnValue: null,
fileName: "filename.zip" // 업로드 대상 파일 이름
}
// release 2.2.1 이상
{
editor: SynapEditor,
eventType: "beforeUploadFile",
cancelable: true,
returnValue: null,
fileType: "file", // [2.2.1] 파일 타입
fileName: "filename.zip",
uploadCount: 0 // [2.2.1] 업로드 중인 파일 수 (아직 업로드 되지 않은 업로드 대상 수)
} |
7. afterUploadFile
파일 업로드가 완료된 후 발생합니다.
이벤트 등록: API 사용
Code Block |
---|
|
var editorId = 'synapEditor';
var editorConfig = {};
var html = '';
var editor = new SynapEditor(editorId, editorConfig, html);
editor.setEventListener('afterUploadFile', function (e) {
}); |
이벤트 등록: 함수방식
Code Block |
---|
|
var editorId = 'synapEditor';
var editorConfig = {};
var html = '';
function SynapEditorAfterUploadFile(e) {
}
new SynapEditor(editorId, editorConfig, html); |
이벤트 등록: 에디터 초기화시 등록
Code Block |
---|
|
var editorId = 'synapEditor';
var editorConfig = {};
var html = '';
var eventListeners = {
afterUploadFile: function (e) {
}
};
new SynapEditor(editorId, editorConfig, html, eventListeners); |
함수로 전달되는 객체 형태
함수로 전달되는 파라미터 e의 형식
Code Block |
---|
|
// release 2.2.0
{
editor: SynapEditor,
eventType: "afterUploadFile",
cancelable: false,
returnValue: null,
path: "/upload/path/filename.zip" // 업로드된 경로
}
// release 2.2.1 이상
{
editor: SynapEditor,
eventType: "afterUploadFile",
cancelable: false,
returnValue: null,
fileType: "file", // [2.2.1] 파일 타입
path: "/upload/path/filename.zip"
} |
8. beforeOpenDocument
문서를 열기 전(임포트 전) 발생합니다.
이벤트 등록: API 사용
Code Block |
---|
|
var editorId = 'synapEditor';
var editorConfig = {};
var html = '';
var editor = new SynapEditor(editorId, editorConfig, html);
editor.setEventListener('beforeOpenDocument', function (e) {
}); |
이벤트 등록: 함수방식
Code Block |
---|
|
var editorId = 'synapEditor';
var editorConfig = {};
var html = '';
function SynapEditorBeforeOpenDocument(e) {
}
new SynapEditor(editorId, editorConfig, html); |
이벤트 등록: 에디터 초기화시 등록
Code Block |
---|
|
var editorId = 'synapEditor';
var editorConfig = {};
var html = '';
var eventListeners = {
beforeOpenDocument: function (e) {
}
};
new SynapEditor(editorId, editorConfig, html, eventListeners); |
함수로 전달되는 객체 형태
함수로 전달되는 파라미터 e의 형식
Code Block |
---|
|
{
editor: SynapEditor,
eventType: "beforeOpenDocument",
cancelable: true,
returnValue: null,
fileType: "WORD", // 파일 타입 ("HTML", "WORD", "CELL", ...)
fileName: "filename.docx" // 파일 이름
} |
9. afterOpenDocument
문서가 열린 후(임포트 이후) 발생합니다.
이벤트 등록: API 사용
Code Block |
---|
|
var editorId = 'synapEditor';
var editorConfig = {};
var html = '';
var editor = new SynapEditor(editorId, editorConfig, html);
editor.setEventListener('afterOpenDocument', function (e) {
}); |
이벤트 등록: 함수방식
Code Block |
---|
|
var editorId = 'synapEditor';
var editorConfig = {};
var html = '';
function SynapEditorAfterOpenDocument(e) {
}
new SynapEditor(editorId, editorConfig, html); |
이벤트 등록: 에디터 초기화시 등록
Code Block |
---|
|
var editorId = 'synapEditor';
var editorConfig = {};
var html = '';
var eventListeners = {
afterOpenDocument: function (e) {
}
};
new SynapEditor(editorId, editorConfig, html, eventListeners); |
함수로 전달되는 객체 형태
함수로 전달되는 파라미터 e의 형식
Code Block |
---|
|
{
editor: SynapEditor,
eventType: "afterOpenDocument",
cancelable: true,
returnValue: null,
fileType: "WORD", // 파일 타입 ("HTML", "WORD", "CELL", ...)
path: "/upload/path/filename.docx", // 임포트 경로
...... // 서버로부터 전달받은 Data (importPath, serializedData, .....)
} |
...