Как отправить изображение через редактор ReactQuill?

Для отправки изображения через редактор ReactQuill вам понадобится использовать два основных аспекта:

1. Подключение плагина для загрузки изображений в ReactQuill.
2. Обработка загруженных изображений на сервере.

Давайте рассмотрим каждый из них более подробно:

1. Подключение плагина для загрузки изображений в ReactQuill:
ReactQuill не имеет функциональности загрузки изображений по умолчанию, поэтому для загрузки изображений вам нужно будет использовать плагин. Один из таких плагинов - React Quill ImageUploader.

Установите React Quill ImageUploader с помощью команды:

npm install react-quill-image-uploader

Затем импортируйте и используйте его следующим образом:

import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';
import ImageUploader from 'react-quill-image-uploader';

const MyEditor = () => {
  const handleImageUpload = (file) => {
    // Обрабатываем изображение здесь (например, отправляем на сервер)
    // И возвращаем URL загруженного изображения
    return new Promise((resolve, reject) => {
      // Ваш код для загрузки изображения на сервер
    });
  };

  return (
    <ReactQuill
      modules={{
        toolbar: {
          container: [
            [{ header: '1' }, { header: '2' }, { font: [] }],
            [{ size: [] }],
            ['bold', 'italic', 'underline', 'strike', 'blockquote'],
            [{ list: 'ordered' }, { list: 'bullet' }],
            ['link', 'image'],
            ['clean'],
          ],
          handlers: { image: ImageUploader(handleImageUpload) },
        },
      }}
    />
  );
};

2. Обработка загруженных изображений на сервере:
После того, как вы загрузили изображение с помощью handleImageUpload, вам нужно обработать его на сервере. Это может быть сделано с использованием различных библиотек на стороне сервера, таких как Express.js, Koa.js, Flask, Ruby on Rails, Django и других.

Вам нужно создать маршрут на сервере, который будет принимать данные изображения и сохранять их в нужное место. Конкретный код на сервере будет зависеть от выбранного вами фреймворка или библиотеки. Вот пример кода на Express.js:

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

const app = express();

const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'uploads/');
  },
  filename: function (req, file, cb) {
    // Произведите обработку имени файла здесь, если необходимо
    cb(null, file.originalname);
  },
});

const upload = multer({ storage: storage });

app.post('/upload-image', upload.single('image'), (req, res) => {
  const imageUrl = `/uploads/${req.file.filename}`;
  res.json({ imageUrl });
});

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

Это простой пример для загрузки изображения на сервер с использованием multer. Обратите внимание, что вы также должны создать папку "uploads" в корневом каталоге вашего проекта, чтобы сохранять загруженные изображения в ней.

Вернувшись к React-коду, вы можете настроить URL-адрес сервера, чтобы отправить запрос на загрузку изображения. Замените эту строку в функции handleImageUpload:

return new Promise((resolve, reject) => {
  // Ваш код для загрузки изображения на сервер
});

На что-то вроде этого:

return new Promise((resolve, reject) => {
  const formData = new FormData();
  formData.append('image', file);

  fetch('/upload-image', {
    method: 'POST',
    body: formData,
  })
    .then((response) => response.json())
    .then((data) => resolve(data.imageUrl))
    .catch((error) => reject(error));
});

В этом примере изображение запаковывается в объект FormData и отправляется на ранее созданный серверный маршрут /upload-image.

В результате вы получите URL загруженного изображения, которое будет добавлено в редактор.

Это полный процесс отправки изображений через редактор ReactQuill.