행사 등록 > 텍스트 에디터 #162
Comments
게시글 수정
이미지 첨부파일 다중 업로드이미지 업로드
이미지 드랍하여 추가내용 조회$ 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
로딩 화면 추가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);
}
};
};이미지 사이즈 조절
마크다운 |
문제 해결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 객체가 존재하지 않기 때문이다. react-quill 라이브러리에서 기본 이미지 업로드 문제react-quill 라이브러리에서 기본적으로 이미지는 base64로 인코딩되어서 img 태그의 src 속성에 삽입된다. 이러면 글의 길이가 굉장히 길어지게 된다. 이런 문제를 해결할려면 AWS S3같은 이미지 서버에 업로드를 해서 업로드된 이미지의 링크를 img 태그의 src속성에 넣어주면 된다. react-quill에서 이미지 업로드를 수정할려면 modules 속성에서 handles: { image: imageHandler } 로 커스텀 이미지 핸들러를 만들어 준다. 이 이미지 핸들러는 input 엘리먼트로 파일을 받고 파일을 이미지 서버에 올리고 현재 커서 위치에 이미지를 삽입하는 코드를 작성하면 된다. ReactQuill 컴포넌트 ref 못가져오는 문제위에서 설명한것처럼 dynamic으로 react-quill 라이브러리를 가져오고, 이미지 커서 위치에 이미지를 삽입하고 커서를 다음 위치로 변경할려면 ReactQuill 컴포넌트의 ref가 필요한데 그냥 ref속성으로 가져오면 못가져오는 버그가 난다. 이런 버그가 발생하는 이유는 next/dynamic으로 import를 하면 그냥 ref속성을 사용해서는 ref를 가져올 수 없다. ref를 가져올라면 next/dynamic에서 함수로 react-quill을 dynamic import를 해서 forwardRef를 시켜주고 ReactQuill컴포넌트에서 forwardedRef 속성으로 ref를 접근하면 된다.
모듈 가져오지 못하는 문제https://github.com/ttony-kim/react-quill-with-image-resize/blob/main/src/components/quillEditor.js |
Editor.js 검토Nestjs 적용마크다운 작성Editor -> html 변환 |
React-Quill
마크다운 구현법
검토
이미지 compression
The text was updated successfully, but these errors were encountered: