React Quill での画像アップロードの実装-jsチュートリアル-php.cn

React Quill での画像アップロードの実装

Linda Hamilton

リリース： 2025-01-12 07:51:42

オリジナル

696 人が閲覧しました

Implementing Image Upload in React Quill

画像アップロード機能の追加は、特にコンテンツ作成ツールを構築する場合、リッチテキストエディターの一般的な要件です。 QuillJS の人気のある React ラッパーである React Quill は、画像のアップロードをネイティブにサポートしていません。ただし、モジュールとハンドラーをカスタマイズすることでこの機能を実装できます。

この記事では、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;

ログイン後にコピー

画像アップロードハンドラーの追加

画像のアップロードを有効にするには、Quille ツールバーをカスタマイズし、画像ハンドラーを設定する必要があります。

ステップ 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();
};

ログイン後にコピー

ステップ 3: ハンドラーを登録する

ハンドラーをモジュール構成に渡します:

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 に画像アップロード機能を追加すると、リッチコンテンツを作成する際の使いやすさが向上します。ツールバーをカスタマイズし、カスタム画像ハンドラーを実装することで、ユーザーが画像をシームレスにアップロードおよび埋め込むことができるようになります。これをファイルのアップロードを処理する堅牢なバックエンドと組み合わせると、アプリケーションに完全に機能するソリューションが得られます。