在 React Quill 中实现图像上传

添加图像上传功能是富文本编辑器的常见要求，尤其是在构建内容创建工具时。 React Quill 是 QuillJS 的流行 React 包装器，本身不支持图像上传。但是，您可以通过自定义其模块和处理程序来实现此功能。

在本文中，我们将探讨如何向 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();
};

第三步：注册处理程序

将处理程序传递给模块配置：

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 添加图像上传功能增强了其创建丰富内容的可用性。通过自定义工具栏并实现自定义图像处理程序，您可以允许用户无缝上传和嵌入图像。将此与强大的后端配对来处理文件上传，您将为您的应用程序提供功能齐全的解决方案。

---

参考

1. React Quill 文档
2. QuillJS 文档
3. Multer 文档
4. React 羽毛笔教程

以上是在 React Quill 中实现图像上传的详细内容。更多信息请关注PHP中文网其他相关文章！