@3/22/2023
문제
•
토스트 UI를 사용하면 이미지를 Base64로 인코딩해서 문자열 형식으로 저장하고 렌더링하기 때문에 DB에 큰 부담을 줄 수 있음
•
따라서 게시글에 이미지를 첨부할 경우 서버 이미지 폴더에 저장한 후 주소를 통해 이미지 리소스를 전달해야 함
TOAST 에디터 hooks 함수
•
hooks 함수를 통해 에디터의 특정 동작에 대한 콜백함수를 지정할 수 있음
•
원래 에디터 JS
const Editor = toastui.Editor;
const editor = new Editor({
el: document.querySelector('#editor'),
height: '500px',
initialEditType: 'WYSIWYG',
previewStyle: 'vertical',
language: "ko-KR"
});
JavaScript
복사
•
이미지 추가 hooks 및 ajax 코드 추가
const Editor = toastui.Editor;
const editor = new Editor({
el: document.querySelector('#editor'),
height: '500px',
initialEditType: 'WYSIWYG',
previewStyle: 'vertical',
language: "ko-KR",
hooks: {
addImageBlobHook: function(imageFile, editorCallback) {
let formData = new FormData();
formData.append("image", imageFile);
imageUploadAjax(formData, editorCallback);
}
}
});
function imageUploadAjax(formData, editorCallback) {
let request = new XMLHttpRequest();
request.onload = () => {
editorCallback(request.responseText, "image");
};
request.open("POST", "/files/images/new", true);
request.send(formData);
}
JavaScript
복사
◦
addImageBlobHook는 이미지를 추가할 때 호출할 함수를 지정할 수 있음
▪
imageFile은 이미지 파일
▪
callback은 이미지 url을 넣어주면 에디터에 이미지를 표시해주는 TOAST Editor의 콜백 함수
컨트롤러
@Controller
@RequiredArgsConstructor
@RequestMapping("/files")
public class FileController {
...
@ResponseBody
@GetMapping("/images/{storedFileName}")
public Resource downloadImage(
@PathVariable String storedFileName
) throws MalformedURLException {
return new UrlResource("file:" + filePath + storedFileName);
}
@ResponseBody
@PostMapping("/images/new")
public String uploadImage(
@RequestParam("image") MultipartFile multipartFile
) throws IOException {
if (multipartFile.isEmpty()) {
return "not found";
}
UploadFile uploadFile = fileManager.storeFile(multipartFile);
String storedFileName = uploadFile.getStoredFileName();
return "/files/images/" + storedFileName;
}
...
}
Java
복사
•
동작 흐름
◦
에디터에서 이미지 추가
◦
addImageBlobHook에 지정한 함수 호출
◦
첫번째 인자(imageFile)에 이미지 파일 객체, 두번째 인자에 에디터에 이미지를 표시하기 위한 콜백 함수(callback)가 들어옴
◦
imageFile을 FormData 객체에 담아 ajax로 전송
◦
ajax 통신이 성공하면 onload 콜백함수 내에서 에디터 callback 함수 호출
▪
첫번째 파라미터로 이미지를 다운받을 url, 두번째 파라미터로 img 태그 alt 속성에 들어갈 내용 지정
◦
에디터 콜백함수는 전달받을 url을 통해 이미지를 요청하고, 전달받은 이미지를 에디터 화면에 뿌려줌
