Implementieren des Bild-Uploads in React Quill

Das Hinzufügen einer Funktion zum Hochladen von Bildern ist eine häufige Anforderung für Rich-Text-Editoren, insbesondere beim Erstellen von Tools zur Inhaltserstellung. React Quill, ein beliebter React-Wrapper für QuillJS, unterstützt das Hochladen von Bildern nicht nativ. Sie können diese Funktion jedoch implementieren, indem Sie ihre Module und Handler anpassen.

In diesem Artikel erfahren Sie, wie Sie React Quill Funktionen zum Hochladen von Bildern hinzufügen, sodass Benutzer Bilder direkt in den Editor hochladen können.

---

React Quill einrichten

Bevor Sie das Hochladen von Bildern implementieren, stellen Sie sicher, dass React Quill installiert und konfiguriert ist:

npm install react-quill

Importieren und richten Sie einen einfachen React Quill-Editor ein:

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;

---

Hinzufügen eines Bild-Upload-Handlers

Um das Hochladen von Bildern zu ermöglichen, müssen wir die Quill-Symbolleiste anpassen und einen Bildhandler konfigurieren.

Schritt 1: Passen Sie die Symbolleiste an

Eine Bildschaltfläche zur Symbolleiste hinzufügen:

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

Schritt 2: Erstellen Sie einen benutzerdefinierten Image-Handler

Mit dem Bildhandler können Benutzer eine Bilddatei hochladen und in den Editor einfügen. So implementieren Sie es:

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

Schritt 3: Registrieren Sie den Handler

Übergeben Sie den Handler an die Modulkonfiguration:

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;

---

Backend-Setup für Bild-Uploads

Ihr Backend muss Datei-Uploads verarbeiten und eine URL für das hochgeladene Bild zurückgeben. Hier ist ein Beispiel mit Node.js und 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'));

---

Hochgeladene Bilder gestalten

Sie können CSS verwenden, um Bilder im Editor zu formatieren. Zum Beispiel:

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

---

Abschluss

Das Hinzufügen der Funktion zum Hochladen von Bildern zu React Quill verbessert die Benutzerfreundlichkeit für die Erstellung umfangreicher Inhalte. Durch Anpassen der Symbolleiste und Implementieren eines benutzerdefinierten Bildhandlers können Sie Benutzern das nahtlose Hochladen und Einbetten von Bildern ermöglichen. Kombinieren Sie dies mit einem robusten Backend zur Verarbeitung von Datei-Uploads, und Sie erhalten eine voll funktionsfähige Lösung für Ihre Anwendung.

---

Referenzen

1. React Quill-Dokumentation
2. QuillJS-Dokumentation
3. Multer-Dokumentation
4. React Quill Tutorial

Das obige ist der detaillierte Inhalt vonImplementieren des Bild-Uploads in React Quill. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!