Melaksanakan Muat Naik Imej dalam React Quill

Menambah fungsi muat naik imej ialah keperluan biasa untuk editor teks kaya, terutamanya apabila membina alatan penciptaan kandungan. React Quill, pembalut React yang popular untuk QuillJS, tidak menyokong muat naik imej secara asli. Walau bagaimanapun, anda boleh melaksanakan ciri ini dengan menyesuaikan modul dan pengendalinya.

Dalam artikel ini, kami akan meneroka cara menambah keupayaan muat naik imej pada React Quill, membenarkan pengguna memuat naik imej terus ke editor.

---

Menyediakan React Quill

Sebelum melaksanakan muat naik imej, pastikan React Quill dipasang dan dikonfigurasikan:

npm install react-quill

Import dan sediakan editor React Quill asas:

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}"></reactquill>
  );
};

export default Editor;

---

Menambah Pengendali Muat Naik Imej

Untuk mendayakan muat naik imej, kami perlu menyesuaikan bar alat Quill dan mengkonfigurasi pengendali imej.

Langkah 1: Sesuaikan Bar Alat

Tambah butang imej pada bar alat:

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

Langkah 2: Buat Pengendali Imej Tersuai

Pengendali imej membolehkan pengguna memuat naik fail imej dan memasukkannya ke dalam editor. Begini cara untuk melaksanakannya:

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();
};

Langkah 3: Daftar Pengendali

Lepaskan pengendali kepada konfigurasi modul:

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}"></reactquill>
  );
};

export default EditorWithImageUpload;

---

Persediaan Bahagian Belakang untuk Muat Naik Imej

Bahagian belakang anda mesti mengendalikan muat naik fail dan mengembalikan URL untuk imej yang dimuat naik. Berikut ialah contoh menggunakan Node.js dan 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'));

---

Menggayakan Imej Yang Dimuat Naik

Anda boleh menggunakan CSS untuk menggayakan imej dalam editor. Contohnya:

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

---

Kesimpulan

Menambah fungsi muat naik imej pada React Quill meningkatkan kebolehgunaannya untuk mencipta kandungan yang kaya. Dengan menyesuaikan bar alat dan melaksanakan pengendali imej tersuai, anda boleh membenarkan pengguna memuat naik dan membenamkan imej dengan lancar. Gandingkan ini dengan bahagian belakang yang teguh untuk mengendalikan muat naik fail dan anda akan mempunyai penyelesaian yang berfungsi sepenuhnya untuk aplikasi anda.

---

Rujukan

1. Dokumentasi Quill React
2. Dokumentasi QuillJS
3. Dokumentasi Berbilang
4. Tutorial Quill React

Atas ialah kandungan terperinci Melaksanakan Muat Naik Imej dalam React Quill. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!