react-quill 은 리액트에디터 라이브러리중 하나이다
여러개의 에디터 라이브러리가 있지만 사실상 리액트에디터 라이브러리중 유일하게 한국어를 지원하는 라이브러리 이기 때문에 유일하게 사용가능 하다. (2023년기준)
여러 모듈도 지원하고 라이브러리 사용이 간편하다.
이미지 추가시, base64 로 변황되어 String값으로 들어간다
에디터 (이미지 리사이즈 없이) 기본 코드
import React, { useState } from "react"
import ReactQuill from "react-quill"
import '../../assets/css/quill.snow.css'
function Reactquill({id, value, setVlaue, isDisable}) {
const modules = {
toolbar: [
// [{ 'font': [] }],
[{ 'header': [1, 2, 3, false] }],
['bold', 'italic', 'underline','strike'],
[{'list': 'ordered'}, {'list': 'bullet'}, {'indent': '-1'}, {'indent': '+1'}],
['link', 'image'],
[{ 'align': [] }, { 'color': [] }, { 'background': [] }], // dropdown with defaults from theme
['clean']
],
}
const formats = [
// 'font',
'header',
'bold', 'italic', 'underline', 'strike',
'list', 'bullet', 'indent',
'link', 'image',
'align', 'color', 'background'
]
return (
<ReactQuill
id={id}
className="form-control text-editor"
theme = 'snow'
modules = {modules}
formats = {formats}
value = {value || ''}
onChange = {(content, delta, source, editor) => setVlaue(editor.getHTML())}
style = {{width: '100%'}}
readOnly={isDisable}
/>
)
}
export default Reactquill;
-이미지 리사이즈 모듈
import React, { useState } from "react"
import ReactQuill from "react-quill"
import '../../assets/css/quill.snow.css'
import Quill from 'quill';
import ImageResize from '@looop/quill-image-resize-module-react';
Quill.register('modules/ImageResize', ImageResize);
function Reactquill({id, value, setVlaue, isDisable}) {
const modules = {
toolbar: [
// [{ 'font': [] }],
[{ 'header': [1, 2, 3, false] }],
['bold', 'italic', 'underline','strike'],
[{'list': 'ordered'}, {'list': 'bullet'}, {'indent': '-1'}, {'indent': '+1'}],
['link', 'image'],
[{ 'align': [] }, { 'color': [] }, { 'background': [] }], // dropdown with defaults from theme
['clean']
],
ImageResize: { modules: ['Resize'] },
}
const formats = [
// 'font',
'header',
'bold', 'italic', 'underline', 'strike',
'list', 'bullet', 'indent',
'link', 'image',
'align', 'color', 'background'
]
return (
<ReactQuill
id={id}
className="form-control text-editor"
theme = 'snow'
modules = {modules}
formats = {formats}
value = {value || ''}
onChange = {(content, delta, source, editor) => setVlaue(editor.getHTML())}
style = {{width: '100%'}}
readOnly={isDisable}
/>
)
}
export default Reactquill;
추가된 코드는
import Quill from 'quill';
import ImageResize from '@looop/quill-image-resize-module-react';
Quill.register('modules/ImageResize', ImageResize);
모듈을 import 해주어야 한다.
혹시 몰라서 Quill도 임포트
ImageResize: { modules: ['Resize'] }
모듈에 한줄 세팅해주면 완료
내가 사용할 에디터기능들을 커스텀 할수있다.
이미지 리사이즈 모듈을 넣음으로써 이미지 모서리에 리사이즈 아이콘이 생성되었다.
- 개인적 문제점
더보기
#문제점
1MB정도의 이미지를 에디터로 넣으면
base64로 변환하면서 String값이 너무 길어지게 된다 ㅠㅠ
나는 formData 로 넘겨주는데 ( 파일도 함꼐 넘겨주기때문)
프론트 단에서 에러가 뜬다
ㅠㅠ
에러를 잡는 작업중인데 이미지 리사이즈를 한다해도 base64변환 스트링이 짧아지는건 아님을 확인...
후..
728x90
반응형
'Front-end > React' 카테고리의 다른 글
ReactQuill 리액트 글쓰기 에디터 이미지 드롭하여 삽입하기 (2) | 2023.08.14 |
---|---|
react-quill 리액트 글쓰기 에디터 이미지 서버에 저장후 url 연결 하기 [base64 문제 해결 too large data] (0) | 2023.08.11 |
[React] 새창 Pop up 데이터 넘겨주는 방법 (0) | 2023.07.19 |
[React] 새창 Pop up 열기 (0) | 2023.06.13 |
Chatgpt 가 말해주는 React의 장/단점 (0) | 2023.04.25 |
댓글