React Quill에서 이미지 업로드 구현-JS 튜토리얼-php.cn

React Quill에서 이미지 업로드 구현

Linda Hamilton

풀어 주다： 2025-01-12 07:51:42

원래의

698명이 탐색했습니다.

Implementing Image Upload in React Quill

이미지 업로드 기능을 추가하는 것은 특히 콘텐츠 제작 도구를 구축할 때 서식 있는 텍스트 편집기의 일반적인 요구 사항입니다. QuillJS의 인기 있는 React 래퍼인 React Quill은 기본적으로 이미지 업로드를 지원하지 않습니다. 그러나 모듈과 핸들러를 사용자 정의하여 이 기능을 구현할 수 있습니다.

이 기사에서는 사용자가 편집기에 이미지를 직접 업로드할 수 있도록 React Quill에 이미지 업로드 기능을 추가하는 방법을 살펴보겠습니다.

React Quill 설정

이미지 업로드를 구현하기 전에 React Quill이 설치 및 구성되어 있는지 확인하세요.

npm install react-quill

로그인 후 복사

기본 React Quill 편집기 가져오기 및 설정:

import React, { useState } from 'react';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';

const Editor = () => {
  const [value, setValue] = useState('');

  return (
    <ReactQuill theme="snow" value={value} onChange={setValue} />
  );
};

export default Editor;

로그인 후 복사

이미지 업로드 핸들러 추가

이미지 업로드를 활성화하려면 Quill 도구 모음을 사용자 정의하고 이미지 핸들러를 구성해야 합니다.

1단계: 도구 모음 사용자 정의

툴바에 이미지 버튼 추가:

const modules = {
  toolbar: [
    ['bold', 'italic', 'underline'],
    [{ list: 'ordered' }, { list: 'bullet' }],
    ['link', 'image'],
  ],
};

로그인 후 복사

2단계: 사용자 지정 이미지 처리기 생성

이미지 핸들러를 사용하면 사용자가 이미지 파일을 업로드하여 편집기에 삽입할 수 있습니다. 구현 방법은 다음과 같습니다.

const handleImageUpload = () => {
  const input = document.createElement('input');
  input.setAttribute('type', 'file');
  input.setAttribute('accept', 'image/*');

  input.addEventListener('change', async () => {
    const file = input.files[0];
    if (file) {
      const formData = new FormData();
      formData.append('image', file);

      // Replace with your API endpoint
      const response = await fetch('/api/upload', {
        method: 'POST',
        body: formData,
      });

      const data = await response.json();
      const imageUrl = data.url;

      const quill = this.quill;
      const range = quill.getSelection();
      quill.insertEmbed(range.index, 'image', imageUrl);
    }
  });

  input.click();
};

로그인 후 복사

3단계: 핸들러 등록

모듈 구성에 핸들러를 전달합니다.

const modules = {
  toolbar: {
    container: [
      ['bold', 'italic', 'underline'],
      [{ list: 'ordered' }, { list: 'bullet' }],
      ['link', 'image'],
    ],
    handlers: {
      image: handleImageUpload,
    },
  },
};

const EditorWithImageUpload = () => {
  const [value, setValue] = useState('');

  return (
    <ReactQuill theme="snow" value={value} onChange={setValue} modules={modules} />
  );
};

export default EditorWithImageUpload;

로그인 후 복사

이미지 업로드를 위한 백엔드 설정

백엔드는 파일 업로드를 처리하고 업로드된 이미지의 URL을 반환해야 합니다. 다음은 Node.js와 Express를 사용한 예입니다.

const express = require('express');
const multer = require('multer');
const path = require('path');

const app = express();
const upload = multer({ dest: 'uploads/' });

app.post('/api/upload', upload.single('image'), (req, res) => {
  const file = req.file;
  const imageUrl = `/uploads/${file.filename}`; // Replace with your storage logic
  res.json({ url: imageUrl });
});

app.use('/uploads', express.static(path.join(__dirname, 'uploads')));

app.listen(3000, () => console.log('Server running on port 3000'));

로그인 후 복사

업로드된 이미지 스타일 지정

CSS를 사용하여 편집기에서 이미지 스타일을 지정할 수 있습니다. 예:

.ql-editor img {
  max-width: 100%;
  height: auto;
}

로그인 후 복사

결론

React Quill에 이미지 업로드 기능을 추가하면 풍부한 콘텐츠 제작에 대한 유용성이 향상됩니다. 도구 모음을 사용자 정의하고 사용자 정의 이미지 처리기를 구현하면 사용자가 이미지를 원활하게 업로드하고 포함할 수 있습니다. 이를 파일 업로드를 처리하는 강력한 백엔드와 결합하면 애플리케이션을 위한 모든 기능을 갖춘 솔루션을 갖게 될 것입니다.