在 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中文網其他相關文章！