Portfolio

기본 사용법


import { Editor } from "@toast-ui/react-editor"
import "@toast-ui/editor/dist/i18n/ko-kr"
import "@toast-ui/editor/dist/toastui-editor.css"

const Home = () => {

  return (
    <>
      <Editor
        previewStyle="vertical" // horizontal로 하면 깃허브처럼 priview 따로 있음
        height="600px"
        initialEditType="markdown" // 모드 설정(기본 마크다운)
        initialValue="hello" // placeholder
        language="ko-KR" // 한국어 제공
      />
    </>
  )
}

export default Home

데이터 형식

마크다운

HTML

문제점

Viewer에서 sanitizing과 html형식으로 보여줄때 문제

보안이슈로 sanitizing을 적용하거나 value로 html을 넣으면 Viewer 에서 보여질때 주석은 그대로 보여지고 체크박스는 제대로 렌더링이 안된다.. → 일단 sanitizing을 안하는 방향이 나아보임

sanitizing

not sanitizing

이미지를 첨부했을때 문자열이 너무 길게 보여진다

마크다운 모드에서 이미지를 첨부하면 자동으로 이미지 파일을 base64로 변환한후 string으로 보여주는데 이게 상당히 보기 힘들다.. 그래서 벨로그 같은 서비스 같이 url로 이쁘게 바꿔서 에디터에 표시해야 하는데 이때 AWS S3가 필요하다. 다행히 toast ui editor v3에서 addImageBlobHook 이라는 훅을 지원해줘서 구현이 가능하다.