Category: ToastUI

0

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;

0

React Toast UI Editor 3 - 입력 내용 가져오기

React Toast UI Editor 3 - 입력 내용 가져오기Editor에 입력된 내용을 저장하고 관리하기 위해서는 입력된 값을 받아와야 한다. Toast UI Editor에서는 useRef를 이용해 const editorRef = useRef(); 버튼 Event Handler 만들기버튼을 만들어줘 버튼을 눌렀을 때 Editor에 입력된 내용을 반환해 주는 Evnet를 작성한다. 입력된 값을 받아올 때는 Ref 객체인 editorRef 를 이용해 Toast UI Editor 객체를 가져와 입력된 값을 받아올 수 있도록 한다. const handleClick = () => { console.log(editorRef.current.getInstance().getMarkdown());}; Button 클릭에 대한 이벤트 핸들러와 Editor 컴포넌트에 Ref 객체를 넣어준다. <div> <Editor initialValue="hello react editor world!" previewStyle="vertical" height="600px" initialEditType="markdown" useCommandShortcut={true} ref={editorRef} plugins={[codeSyntaxHighlight]} /> <button onClick={handleClick}>Markdown 반환하기</button></div> 전체 소스

0

React Toast UI Editor 2 - Syntax Highlight 적용하기

React로 Toast UI Editor 2 - Syntax Highlight 적용하기https://github.com/nhn/tui.editor/tree/master/plugins/code-syntax-highlight 글을 쓰다보면 Post에 코드를 같이 올릴 경우가 많은데, 초기 Setting은 Code Highlight가 적용돼 있지 않는 것을 확인할 수 있었다. 아무래도 Code Highlight가 없어서 코드를 작성하게 되면 가독성도 좀 떨어지고 Post 작성할 맛도 안나서 Editor에 Code Highlight를 적용하려고 한다. 패키지 추가yarn add @toast-ui/editor-plugin-code-syntax-highlightyarn add prism import React from "react";// 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 = () => { return ( <Editor initialValue="hello react editor world!" previewStyle="vertical" height="600px" initialEditType="markdown" useCommandShortcut={true} plugins={[codeSyntaxHighlight]} /> );};export default Write; Code Highlight가 적용된 것을 확인할 수 있다. 덕분에 가독성도 훨씬 좋아져 점점 맘에 들기 시작했다.

0

React로 Toast UI Editor 사용해보기

React로 Toast UI Editor 사용해보기개인 프로젝트도 하고 싶고 나만의 블로그를 만들고 싶은 마음에 UI도 찾아보고 Editor도 찾고 있었었다. 개인적으로 Editor를 찾고 있던 기준은 첫번째는 Markdown 언어가 사용 가능해야 하고 두번째는 이미지 업로드가 가능한 Editor를 찾고 있던 와중에 NHN에서 제공하는 Toast UI Editor를 찾게 됐다. 기능들이 너무너무 맘에 들어 사용해보기로 했다. Toast UI Editor에서는 내가 가장 원했던 Markdown 문법이 사용 가능 했고, 이미지 업로드도 가능 했다.!!! 그리고 코드블럭에 마음에 드는 Syntax Highlighter를 적용할 수 있는 장점과 다양한 기능들이 있어 너무나도 맘에 들었다. 플러그인 설치하기yarn add @toast-ui/react-editor Write.jsx import React from "react";import { Editor } from "@toast-ui/react-editor";import "@toast-ui/editor/dist/toastui-editor.css";const Write = () => { return ( <Editor initialValue="hello react editor world!" previewStyle="vertical" height="600px" initialEditType="markdown" useCommandShortcut={true} /> );};export default Write; 마지막으로 App.js에 새로만든 Write.jsx 컴포넌트를 추가하면 화면에서 Toast UI가 나타나는 것을 확인할 수 있다.