react-quill

react-quillのインストール

yarn add react-quill

import

import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';

return(
  <div>
  내용 : <ReactQuill onChange={onChangeContents} />
  </div>
)

糸開発時のプリレンダリングの問題

// import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css'; // ES6
import dynamic from 'next/dynamic';
// 다이나믹 임포트

const ReactQuill = dynamic(()=> import("react-quill"), {ssr : false})
                                   // 서버사이트렌더링(ssr) false -> 브라우저에서만 그리겠다

react-hook-formとreact-quillを使用する場合

    const {register, handleSubmit, setValue} = useForm({
        mode : "onChange"
    })

    const onChangeContents = (value:string) =>{
        console.log(value)
        // register로 등록하지 않고 강제로 값을 넣어주는 기능
        setValue("contents", value)
    }

trigger

   const {register, handleSubmit, setValue, trigger } = useForm({
       mode : "onChange"
   })

   const onChangeContents = (value:string) =>{
       console.log(value)


       // register로 등록하지 않고 강제로 값을 넣어주는 기능
       setValue("contents", value === "<p><br></p>" ? "" : value)
                                   // 내용부분 다 지워도 남는 태그들 때문에 빈칸으로 처리 안되므로 저 태그들만 있을때 빈칸으로 만들어줌

       trigger("contents")
       // onChange 됐다고 react-hook-form에 알려주는 기능
   }

タグを削除して印刷しますか?

            <div dangerouslySetInnerHTML={{
                __html: data?.fetchBoard.contents,
            }}></div>

これを止めるなら?

yarn add dompurify

import Dompurify from 'dompurify'

 <div dangerouslySetInnerHTML={{
              __html: Dompurify.sanitize(data?.fetchBoard.contents),
          }}></div>

            {typeof window !== "undefined" && (<div dangerouslySetInnerHTML={{
              __html: Dompurify.sanitize(data?.fetchBoard.contents),
          }}></div>)}