toast ui editor viewer

toast ui editor는 여러모로 다른 에디터보다 서비스가 좋은 편이지만 ㅠㅠ markdown이 까다롭다는 점이 참 안타깝다.

여러가지로 찾아보니,, 몇가지 단점이 있는데 

parser기능이 전부 먹히지는 않는다는 것이다. dangerousHtml 은 위험하고, html-react-parser는 일정 태그만 인식하여 toast ui editor로 담은 모든 태그들이 담기지가 않았다.

toast ui 에서 제공하는 Viewer도 react 버전으로 찾기가 어려웠는데, 다섯시간동안 고생 고생을 하며 찾아낸 방법이다.

혹시라도 나같이 고생한 분들은 이 방법을 꼭 써보길 바란다 ㅠㅠ.. 필자는 Viewer 컴포넌트가 잘 동작하지 않는다고 느낀것이, 다양한 리스트를 각각 클릭하여 해당 Viewer의 내용을 보여줘야 했는데, 이상하게 리스트를 두번클릭해야 정상적으로 나왔다. 이유는 알수 없지만, Viewer컴포넌트를 활용하는것 보다 하단 방법이 안정적인것 같다. (**Viewer를 dist에서 import해와서 시도해보세요 !! )

 

import React, { useEffect, useRef, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { getAllRepliesOfOnePosting } from '../../../../features/admin/communitySlice'
//import  {Viewer}  from '@toast-ui/react-editor';
import Viewer from "@toast-ui/editor/dist/toastui-editor-viewer";
import '@toast-ui/editor/dist/toastui-editor-viewer.css';

const TestPage = () => {
  const {isInInfoId} = useSelector((state)=>state.commu)
  const [newContent, setNewContent] = useState('')
  const dispatch = useDispatch()

  // const viewer = new Viewer({
  //   el: document.querySelector('#viewer'),
  //     height: '600px',
  //     initialValue: newContent
  // });

  useEffect(()=>{
    const viewer = new Viewer({
      el: document.querySelector("#viewer")
    });
    const fetchInfo =  async() =>{
      if(isInInfoId){
        let param = {postingId:isInInfoId.id,isInfo:true}
        const res = await dispatch(getAllRepliesOfOnePosting(param)).unwrap();
        console.log(res,"----------res")
        if(res.ok){
          console.log(res)
          setNewContent(res.posting)
          viewer.setMarkdown(res.posting.content)
        }
      }
    }
    fetchInfo();
  },[getAllRepliesOfOnePosting])
  return (
    <div>
      {newContent?.title}
      {newContent?.content}
      <div id="viewer"></div>
      {/* <Viewer 
      ref={viewerRef}
      initialValue={newContent?.content}/> */}
      {/* <div>{Parser(newContent?.content)}</div> */}
    </div>
  )
}

export default TestPage