행사 등록 > 텍스트 에디터

[KoEonYack]

• 텍스트 에디터 검토 (이미지 업로드 기능 필요)
• 텍스트 에디터 > 추가
• 텍스트 에디터 > 로딩
• 텍스트 에디터 > 첨부 > 이미지 업로드
• 텍스트 에디터 > 이미지 사이즈 조절
• 텍스트 에디터 > 이미지 압축
• 마크다운 모드 추가
• 텍스트 에디터 > 이미지 드레그 업로드
• 텍스트 에디터 > 게시글 수정시 불러오기
• 텍스트 에디터 > lazy 업로드

---

React-Quill

• React-Quill Editor 이미지 처리하기 (유력?)
  • 간편하게 구현, 멀티 이미지 업로드
  • https://yhuj79.github.io/React/230214/
• Quill React 에디터 사용해보기 (이미지 업로드 및 사이즈 조절)
  • 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
• nexjs에 사용: https://www.datadeveloper.kr/datas/nextjs/view/data2401-12
• 에디터에 설정하는 module을 외부 파일로 분리: https://codesandbox.io/p/sandbox/react-quill-preserve-whitespace-4h211?file=%2Fsrc%2Fconstants.js%3A11%2C14-11%2C28
• css 조작해서 디자인 수정: http://codesandbox.io/p/sandbox/react-quill-editor-with-image-resize-kv7u2f?file=%2Fsrc%2Fstyles.css
• 🌟 SEO 문제 해결: https://velog.io/@pds0309/nextjs%EC%97%90%EC%84%9C-Quill-Editor-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%B5%9C%EC%A0%81%ED%99%94%ED%95%98%EA%B8%B0

마크다운 구현법

• https://cloverhearts.github.io/quilljs-markdown/
• https://stackoverflow.com/questions/64989971/install-quilljs-markdown-on-react

---

검토

• CKEditor
  • 복사 붙여넣기 이미지 업로드 가능 (nextjs와 궁합이 안좋음 ㅠㅠ)
  • 마크다운 모드는 유료
  • 많이 사용
  • https://justweon-dev.tistory.com/75
  • 조회: https://velog.io/@yund_272/%EB%A6%AC%EC%95%A1%ED%8A%B8-CKEditor5-%EC%A0%81%EC%9A%A9%EA%B8%B0-88vylruv
  • 이미지 업로드 예시 코드: https://codesandbox.io/s/react-ckeditor-upload-image-demo-cwcvh4?file=/src/App.tsx
  • 예시 코드: https://codesandbox.io/p/sandbox/ck-editor-new-2rdt0d?file=%2Fpackage.json%3A6%2C26
  • 예시 코드: https://codesandbox.io/s/react-ckeditor-upload-image-demo-cwcvh4?file=/src/App.tsx:366-379
• React-Quill Editor 이미지 처리하기 (유력?)
  • 2년동안 유지보수 되지 않았음 (React 19에서 안되는것으로 보임)
  • 마크다운 플러그인은 nextjs에서 안됨
  • 간편하게 구현, 멀티 이미지 업로드
  • https://yhuj79.github.io/React/230214/
• Quill React 에디터 사용해보기 (이미지 업로드 및 사이즈 조절)
  • 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
• Draft.js
  • handlePasetedFiles 이용해서 처리
  • https://medium.com/bgpworks/draft-js-%EC%82%AC%EC%9A%A9%EA%B8%B0-%EC%97%90%EB%94%94%ED%84%B0-%EB%A7%8C%EB%93%A4%EA%B8%B0-afad9b308a40
• Lexical
  • 페이스북이 공개한 에디터
• 토스트 UI 에디터
  • 리엑트 18 미지원
  • 블로그에 개발 가이드 참고할만함
    • 적용: https://leego.tistory.com/entry/React-%EC%97%90%EB%94%94%ED%84%B0%EB%A1%9C-TOAST-UI-Editor-%EC%82%AC%EC%9A%A9%ED%95%B4%EB%B3%B4%EA%B8%B0
    • 이미지 첨부하기: https://leego.tistory.com/entry/Toast-UI-Editor-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%B2%A8%EB%B6%80%ED%95%98%EA%B8%B0?category=512184
• onPaste
  • https://bloodstrawberry.tistory.com/1343

이미지 compression

[KoEonYack]

게시글 수정

• 게시글 수정 with nextjs
  • https://hanna-log.tistory.com/entry/nextjs%EC%97%90%EC%84%9C-reactquill-useRef-%EC%82%AC%EC%9A%A9
  • https://codesandbox.io/p/sandbox/react-quill-editor-with-image-resize-kv7u2f?file=%2Fsrc%2FEditorWithUseQuill.js%3A4%2C36

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

• https://suskind.tistory.com/m/122

이미지 업로드

• 설명 주석: https://12ahn22.tistory.com/entry/Quill-%EC%97%90%EB%94%94%ED%84%B0-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%B2%98%EB%A6%AC%ED%95%98%EA%B8%B0
• Custom image handler  zenoamaro/react-quill#743

이미지 드랍하여 추가

• https://byul91oh.tistory.com/614

---

내용 조회

$ 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/

• 그런데 한 번에 팍 보여주고 싶지 않다면?
  • https://velog.io/@pds0309/nextjs%EC%97%90%EC%84%9C-dynamic-import%EB%A1%9C-quill-editor-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0

---

로딩 화면 추가

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

---

이미지 사이즈 조절

• 🌟 nextjs 모듈 추가 등록: https://velog.io/@pds0309/nextjs%EC%97%90%EC%84%9C-dynamic-import%EB%A1%9C-quill-editor-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0
• https://mingeesuh.tistory.com/entry/Quill-React-에디터-사용해보기-이미지-업로드-및-사이즈-조절

---

마크다운

• https://velog.io/@real-bird/Next.js-react-md-editor-Next.js%EC%97%90%EC%84%9C-Markdown-Editor-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0
• How do I upload images? uiwjs/react-md-editor#83
• 랜더링: https://velog.io/@2taeyoon/React%EC%97%90%EC%84%9C-markdown-%EB%9E%9C%EB%8D%94%EB%A7%81%ED%95%98%EA%B8%B0

[KoEonYack]

문제 해결

---

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를 접근하면 된다.

• ssr false 하면 ref가 없다고 나옴

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
https://stackoverflow.com/questions/60458247/how-to-access-reactquill-ref-when-using-dynamic-import-in-nextjs

---

모듈 가져오지 못하는 문제

https://github.com/ttony-kim/react-quill-with-image-resize/blob/main/src/components/quillEditor.js

[KoEonYack]

Editor.js 검토

Nestjs 적용

마크다운 작성

Editor -> html 변환

• https://codesandbox.io/s/react-editorjs-example-ng6qzo?file=/src/components/editor-parser/EditorTextParser.js