添加圖像上傳功能是富文本編輯器的常見要求，尤其是在構(gòu)建內(nèi)容創(chuàng)建工具時(shí)。 React Quill 是 QuillJS 的流行 React 包裝器，本身不支持圖像上傳。但是，您可以通過自定義其模塊和處理程序來實(shí)現(xiàn)此功能。

在本文中，我們將探討如何向 React Quill 添加圖像上傳功能，允許用戶直接將圖像上傳到編輯器中。

---

設(shè)置 React Quill

在實(shí)現(xiàn)圖片上傳之前，請確保已安裝并配置 React Quill：

npm install react-quill

導(dǎo)入并設(shè)置基本的 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 步：創(chuàng)建自定義圖像處理程序

圖像處理程序允許用戶上傳圖像文件并將其插入編輯器中。實(shí)現(xiàn)方法如下：

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;

---

圖像上傳的后端設(shè)置

您的后端必須處理文件上傳并返回上傳圖像的 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'));

---

設(shè)置上傳圖像的樣式

您可以使用 CSS 在編輯器中設(shè)置圖像樣式。例如：

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

---

結(jié)論

向 React Quill 添加圖像上傳功能增強(qiáng)了其創(chuàng)建豐富內(nèi)容的可用性。通過自定義工具欄并實(shí)現(xiàn)自定義圖像處理程序，您可以允許用戶無縫上傳和嵌入圖像。將此與強(qiáng)大的后端配對來處理文件上傳，您將為您的應(yīng)用程序提供功能齊全的解決方案。

---

參考

1. React Quill 文檔
2. QuillJS 文檔
3. Multer 文檔
4. React 羽毛筆教程

以上是在 React Quill 中實(shí)現(xiàn)圖像上傳的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！