React Toast UI Editor 4 - 이미지 올리기
React Toast UI Editor 4 - 이미지 올리기Editor에서 이미지 업로드를 지원하다고 해서 이미지를 붙여 넣었더니 다음과 같이 이미지가 base64로 인코딩 돼 올라가는 것을 보고 살짝 당황했다. 어떻게 해야지 하면서 문득 생각이 들었던게 Markdown Editor를 사용하는 대표 블로그 사이트인 velog가 생각이 났다. 그래서 당장 velog로 가서 이미지를 올려보니! 다음과 같이 이미지가 저장된 URL을 가져오는 것을 확인 할 수 있었다. 아마 내부적으로 이미지가 들어오면 먼저 서버에 이미지를 저장하고 이미지가 저장된 경로를 받는 로직 같았다. 즉! 이미지를 업로드 하려면 이미지를 저장할 수 있는 서버를 준비해 연동할 필요가 있다는 것이다. Toast UI Editor에 Image 업로드 하기 위한 방법을 찾다 보니 처음에 연결된 Hook을 제거하고 새로운 Hook을 정의해 서버에 이미지를 올릴 수 있는 것을 알게 됐다. https://github.com/nhn/tui.editor/issues/1588 TOAST UI 에 Image Server 에 올리는 기능 구현import React, { useRef, useEffect } from "react";import axios from "axios";// Toast UI Editor 모듈 추가import { Editor } from "@toast-ui/react-editor";import "@toast-ui/editor/dist/toastui-editor.css";// SyntaxHighlight 모듈 추가import codeSyntaxHighlight from "@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight-all.js";// prism 모듈 추가import "prismjs/themes/prism.css";const Write = () => { const editorRef = useRef(); const handleClick = () => { console.log(editorRef.current.getInstance().getMarkdown()); }; useEffect(() => { if (editorRef.current) { // 기존에 Image 를 Import 하는 Hook 을 제거한다. editorRef.current.getInstance().removeHook("addImageBlobHook"); // 새롭게 Image 를 Import 하는 Hook 을 생성한다. editorRef.current .getInstance() .addHook("addImageBlobHook", (blob, callback) => { (async () => { let formData = new FormData(); formData.append("file", blob); console.log("이미지가 업로드 됐습니다."); const { data: filename } = await axios.post( "/file/upload", formData, { header: { "content-type": "multipart/formdata" }, } ); // .then((response) => { // console.log(response); // }); const imageUrl = "http://localhost:8080/file/upload/" + filename; // Image 를 가져올 수 있는 URL 을 callback 메서드에 넣어주면 자동으로 이미지를 가져온다. callback(imageUrl, "iamge"); })(); return false; }); } return () => {}; }, [editorRef]); return ( <div> <Editor initialValue="hello react editor world!" previewStyle="vertical" height="800px" initialEditType="markdown" useCommandShortcut={true} ref={editorRef} plugins={[codeSyntaxHighlight]} /> <button onClick={handleClick}>Markdown 반환하기</button> </div> );};export default Write;