이 문서에서는 Toast UI Editor에 hook을 설정하여 파일 업로드를 처리하는 방법에 대해서 다룬다.
hooks 설정
Toast UI Editor를 생성할 때 다음과 같은 옵션을 추가한다.
hooks: {
'addImageBlobHook' : function(blob, callback) {
//이미지 추가시 수행할 작업 코드를 작성
}
}
별도의 서버를 운영한다면 해당 서버의 백엔드 코드에 업로드, 다운로드가 구현되어 있어야 한다.
코드의 흐름은 다음과 같다.
hooks: {
//blob - 사용자가 선택한 파일
//callback - 파일이 업로드 된 후 에디터에 표시할 이미지 주소를 전달할 콜백함수
'addImageBlobHook' : function(blob, callback){
//1. ajax file upload를 위한 FormData 객체 생성
var data = new FormData();
//2. data에 업로드할 파일을 이름을 부여하여 추가
// - 이름은 서버에서 읽을 이름으로 설정
data.append("attachment", blob);
//3. ajax 요청을 통해 파일 업로드
axios.post("서버 업로드 주소", data, {
//multipart 설정
headers: {
"Content-Type" : "multipart/form-data"
}
})
.then(res=>{
//4-1. 업로드 성공한 경우
// - 서버에서 반드시 다운로드 주소를 반환해야한다
// - 서버에서 반환된 데이터가 다음과 같다고 가정한다
// - {url : "다운로드주소"}
// - callback 함수를 실행하며 주소를 전달하면 img 태그가 생성된다
callback(result.data.url);
})
.catch(err=>{
//4-2. 업로드 실패한 경우
// - 사용자에게 알림 등을 출력한다.
window.alert("업로드 실패");
});
}
}