텍스트 에디터 관련해서 질문입니다

프론트와 백엔드 모두 작업이 필요할 수 있으며, 다음의 절차대로 움직입니다. (1) 이미지 업로드 (2) 업로드된 이미지의 URL을 에디터 본문의 img 태그에 삽입 (3) 작성완료된 본문(html) 전체를 DB에 저장 react quill을 별도의 설정 없이 사용하면 본문의 img 태그에 기본으로 base64 문자열이 삽입되어 아주 길어집니다. 따라서 우리가 원하는 일은 '툴바의 사진 버튼 눌러서 사진 삽입 시, base64 대신 url이 img 태그에 삽입되는 것'입니다. react quill에서는 custom toolbar를 지원하므로, 이를 통해 원하는 작업을 할 수 있습니다. custom toolbar 옵션을 이용하면 toolbar 속 사진 버튼의 click 이벤트에 대한 핸들러 함수를 직접 정의할 수 있습니다. 코드를 어떻게 작성할지 까지는 답변드리지 않겠지만, 대신 도움이 될 만한 링크들 함께 공유드릴게요. - https://www.npmjs.com/package/react-quill#custom-toolbar - https://quilljs.com/docs/modules/toolbar/#handlers - https://velog.io/@runprogrmm/Next.js-React-react-quill-%EC%97%90%EB%94%94%ED%84%B0%EB%A1%9C-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%B2%98%EB%A6%AC%ED%95%98%EA%B8%B0

이미지 추가 시 백엔드로 요청 해서 스토리지(예 aws S3)에 저장 후 url 리턴받으면 될듯 합니다

사용하는 db나 백엔드 환경에 따라 다르겠지만 스프링 부트 기준으로 받는 dto랑 entity 모두 @lob걸어주면 longtext타입으로 가지더군요