search

brave-people / Dev-Event-Client

🎉🎈 Dev Event Client - 관리자 🌐
https://dev-event-client.vercel.app/
MIT License
3 stars 3 forks source link

행사 등록 > 텍스트 에디터 #162

Open KoEonYack opened 5 months ago

KoEonYack commented 5 months ago

React-Quill

마크다운 구현법

검토

KoEonYack commented 5 months ago

게시글 수정

이미지 첨부파일 다중 업로드

이미지 업로드

이미지 드랍하여 추가

내용 조회

$ yarn add isomorphic-dompurify

// src/ReadQuill.js
import DOMPurify from "isomorphic-dompurify"
import "react-quill/dist/quill.core.css"
function ReadQuill() {
  const content = "<h1>안녕하세요!</h1><h2>안녕하세요!</h2><h3>안녕하세요!</h3>"
  return (
    <div
      className="view ql-editor" // react-quill css
      dangerouslySetInnerHTML={{
        __html: DOMPurify.sanitize(content),
      }}
    />
  )
}
export default ReadQuill

https://yhuj79.github.io/React/230214/

로딩 화면 추가

const handleImage = () => {
        const input = document.createElement("input");
        input.setAttribute("type", "file");
        input.setAttribute("accept", "image/*");
        input.click();
        input.onchange = async () => {
          const file = input.files[0];

          // 현재 커서 위치 저장
          const range = getEditor().getSelection(true);

          // 서버에 올려질때까지 표시할 로딩 placeholder 삽입
          getEditor().insertEmbed(range.index, "image", `/images/loading.gif`);

          try {
            // 필자는 파이어 스토어에 저장하기 때문에 이런식으로 유틸함수를 따로 만들어줬다 
            // 이런식으로 서버에 업로드 한뒤 이미지 태그에 삽입할 url을 반환받도록 구현하면 된다 
            const filePath = `contents/temp/${Date.now()}`;
            const url = await uploadImage(file, filePath); 

            // 정상적으로 업로드 됐다면 로딩 placeholder 삭제
            getEditor().deleteText(range.index, 1);
            // 받아온 url을 이미지 태그에 삽입
            getEditor().insertEmbed(range.index, "image", url);

            // 사용자 편의를 위해 커서 이미지 오른쪽으로 이동
            getEditor().setSelection(range.index + 1);
          } catch (e) {
            getEditor().deleteText(range.index, 1);
          }
        };
      };

https://mingeesuh.tistory.com/entry/Quill-React-%EC%97%90%EB%94%94%ED%84%B0-%EC%82%AC%EC%9A%A9%ED%95%B4%EB%B3%B4%EA%B8%B0-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%97%85%EB%A1%9C%EB%93%9C-%EB%B0%8F-%EC%82%AC%EC%9D%B4%EC%A6%88-%EC%A1%B0%EC%A0%88

이미지 사이즈 조절

마크다운

KoEonYack commented 5 months ago

문제 해결

ReactQuill 실행 오류

const ReactQuill /**/ = dynamic(() => import('react-quill'), { ssr: false });

react-quill 라이브러리를 next.js에서 그냥 import를 하게 되면 next.js가 ssr에서 react-quill 라이브러리를 렌더링 할때 document 객체를 찾을 수 없는 에러가 뜬다.

이런 에러를 발생하는 이유는 react-quill 라이브러리는 내부적으로 document 객체를 사용하는데 next.js 에서 ssr로 렌더링될때 브라우저가 아닌 서버에서 렌더링이 되기 때문에 브라우저에서만 사용 가능한 window 객체가 없고 그로 인해 window.document 객체가 존재하지 않기 때문이다. 이를 해결할려면 next/dynamic에서 ssr: false 로 import를 하면 react-quill 컴포넌트가 ssr에서는 렌더링이 되지 않고 브라우저에서만 렌더링을 하게 만들어서 해결할 수 있다.

https://velog.io/@jungsangu/Next.js%EC%97%90%EC%84%9C-react-quill-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%97%85%EB%A1%9C%EB%93%9C-%ED%95%98%EA%B8%B0

react-quill 라이브러리에서 기본 이미지 업로드 문제

react-quill 라이브러리에서 기본적으로 이미지는 base64로 인코딩되어서 img 태그의 src 속성에 삽입된다. 이러면 글의 길이가 굉장히 길어지게 된다.

이런 문제를 해결할려면 AWS S3같은 이미지 서버에 업로드를 해서 업로드된 이미지의 링크를 img 태그의 src속성에 넣어주면 된다. react-quill에서 이미지 업로드를 수정할려면 modules 속성에서 handles: { image: imageHandler } 로 커스텀 이미지 핸들러를 만들어 준다. 이 이미지 핸들러는 input 엘리먼트로 파일을 받고 파일을 이미지 서버에 올리고 현재 커서 위치에 이미지를 삽입하는 코드를 작성하면 된다.

https://velog.io/@jungsangu/Next.js%EC%97%90%EC%84%9C-react-quill-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%97%85%EB%A1%9C%EB%93%9C-%ED%95%98%EA%B8%B0

ReactQuill 컴포넌트 ref 못가져오는 문제

위에서 설명한것처럼 dynamic으로 react-quill 라이브러리를 가져오고, 이미지 커서 위치에 이미지를 삽입하고 커서를 다음 위치로 변경할려면 ReactQuill 컴포넌트의 ref가 필요한데 그냥 ref속성으로 가져오면 못가져오는 버그가 난다.

이런 버그가 발생하는 이유는 next/dynamic으로 import를 하면 그냥 ref속성을 사용해서는 ref를 가져올 수 없다. ref를 가져올라면 next/dynamic에서 함수로 react-quill을 dynamic import를 해서 forwardRef를 시켜주고 ReactQuill컴포넌트에서 forwardedRef 속성으로 ref를 접근하면 된다.

KoEonYack commented 4 months ago

Editor.js 검토

Nestjs 적용

마크다운 작성

Editor -> html 변환