선생님 제 나름대로 시도해본건
1. 처음 이미지 업로드 함수
2. 이미지 크기 수정 함수
이렇게 두개를 나눴습니다.
나눈 이유는 선생님이 react-quill을 사용해보셨는지는 모르겠지만
const { attributes, insert } = editorContent.ops[0];
여기서 console.log(attributes); 를해보면 언디파인이뜹니다.
근데, 이미지 크기를 한번이라도 수정을 해주면 width:'이미지가로넓이'px 이렇게뜹니다.
그래서 1번과 2번으로 나눴는데요
문제는.. 처음 이미지 함수에서 이미지를 올린것과 이미지 크기 수정함수에서 이미지를 수정하면 같은 이미지면 중복해서 저장이되어야하는데
각각 저장이 되어버립니다..
저장되어있는 (status[]) 배열에 이미지가 중복해있으면 그 이미지를 덮어쓰게끔 해주고싶은데 .. 너무 복잡하게 구현하고있는걸까요?
혹시몰라서 제 전체 코드 첨부했습니다..
import React, { FormEvent, useMemo, useRef, useState } from 'react';
import ReactQuill, { Quill } from 'react-quill';
import { base64StringToBlob } from 'blob-util';
import { ImageResize } from 'quill-image-resize-module-ts';
import 'react-quill/dist/quill.snow.css';
import { useLocation } from 'react-router-dom';
import { styled } from 'styled-components';
Quill.register('modules/imageResize', ImageResize);
const Container = styled.div`
.quill {
.ql-editor {
min-height: 20rem;
height: 100%;
}</pre>
<pre> .ql-snow {
border: 1px solid #eee;
}
.ql-container {
min-height: 20rem;
height: 100%;
/* height: 10rem; */
/* height: 20rem; */
}
}
`;
const Button = styled.button<{ bgColor: string }>`
width: 100%;
padding: 0.5rem;
margin: 0.5rem 0;
border-radius: 5px;
border: 1px solid #eee;
font-weight: bold;
transition: all 0.3s ease;
&:hover {
color: #fff;
background-color: ${({ bgColor }) => bgColor};
}
`;
interface ITextEditor {
title: string;
contents: string;
imageFile?: any[];
setContents: React.Dispatch<React.SetStateAction<string>>;
setImageFile?: any;
}
const TextEditor = ({
title,
contents,
imageFile,
setContents,
setImageFile,
}: ITextEditor) => {
const { pathname } = useLocation();
const quillRef = useRef(null) as any;
const getBase64Image = (img: any) => {
const canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
const ctx = canvas.getContext('2d');
ctx && ctx.drawImage(img, 0, 0, img.width, img.height);
const dataUrl = canvas.toDataURL('image');
const imageBase64 = dataUrl.replace(/^data:image\/(png|jpg);base64,/, '');
return { dataUrl, imageBase64 };
};
// 이미지 크기 수정했을 때
const editorFile = () => {
const editor = quillRef?.current?.getEditor();
const editorContent = editor.getContents();
// console.log('editorRef => ', editorContent.ops[0]);
const { attributes, insert } = editorContent.ops[0];
if (attributes) {
const image = new Image();
image.src = insert.image;
image.height = attributes.width;
image.width = attributes.width;
image.alt = 'sample';
const { dataUrl, imageBase64 } = getBase64Image(image);
const contentType = 'image';
const blob = base64StringToBlob(imageBase64, contentType);
console.log(blob);
const file = new File([blob], image.alt, { type: blob.type });
setImageFile((prev: any) => [...prev, file]);
}
// console.log(image);
};
const onSubmit = (e: FormEvent) => {
// 이미지 크기 수정했을 때
editorFile();
};
// 이미지 처음 올렸을때
const saveImage = () => {
const input = document.createElement('input');
input.setAttribute('type', 'file');
input.setAttribute('accept', 'image/*');
input.click();
input.addEventListener('change', async () => {
const file = input.files && input.files[0];
const editor = quillRef.current.getEditor();
const range = editor.getSelection();
if (file) {
const reader = new FileReader();
if (file && file.type.match('image.*')) {
reader.readAsDataURL(file);
reader.onload = function () {
editor.insertEmbed(range.index, 'image', reader.result);
editor.setSelection(range.index + 1);
setImageFile((prev: any) => [...prev, file]);
};
}
}
});
};
const modules = useMemo(() => {
if (pathname === '/pages/newsPost') {
return {
toolbar: {
container: [
['bold', 'italic', 'underline', 'strike'],
[{ size: ['small', false, 'large', 'huge'] }, { color: [] }],
['image'],
],
handlers: { image: saveImage },
},
imageResize: {
parchment: {
image: {
attributes: ['width', 'height'],
},
},
modules: ['Resize', 'DisplaySize'],
},
};
} else {
// 다른 페이지의 경우 이미지 삽입 기능을 포함하지 않는 설정 반환
return {
toolbar: {
container: [
['bold', 'italic', 'underline', 'strike'],
[{ size: ['small', false, 'large', 'huge'] }, { color: [] }],
],
},
imageResize: {
parchment: {
image: {
attributes: ['width', 'height'],
},
},
modules: ['Resize', 'DisplaySize'],
},
};
}
}, [pathname]);
return (
<Container>
<ReactQuill
ref={quillRef}
modules={modules}
theme='snow'
value={contents}
onChange={setContents}
placeholder='여기에 내용을 입력하세요...'
/>
<Button type='submit' bgColor={'skyblue'} onClick={onSubmit}>
작성하기
</Button>
</Container>
);
};
export default TextEditor;
