March 22, 2023

<aside> <img src="/icons/list_gray.svg" alt="/icons/list_gray.svg" width="40px" /> 목차

</aside>

문제

• 토스트 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"
  });
  

• 이미지 추가 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);
  }
  

  • 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;
		}
	
		...
}

• 동작 흐름
  • 에디터에서 이미지 추가
  • addImageBlobHook에 지정한 함수 호출
  • 첫번째 인자(imageFile)에 이미지 파일 객체, 두번째 인자에 에디터에 이미지를 표시하기 위한 콜백 함수(callback)가 들어옴
  • imageFile을 FormData 객체에 담아 ajax로 전송
  • ajax 통신이 성공하면 onload 콜백함수 내에서 에디터 callback 함수 호출
    • 첫번째 파라미터로 이미지를 다운받을 url, 두번째 파라미터로 img 태그 alt 속성에 들어갈 내용 지정
  • 에디터 콜백함수는 전달받을 url을 통해 이미지를 요청하고, 전달받은 이미지를 에디터 화면에 뿌려줌

References