리액트 글쓰기 라이브러리 사용 해서 에디터 만들기 react-quill 에디터 이미지 파일 리사이즈

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변환 스트링이 짧아지는건 아님을 확인...

후..