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

この記事では、React Quill に畫像アップロード機(jī)能を追加して、ユーザーがエディターに畫像を直接アップロードできるようにする方法を検討します。

React Quill のセットアップ

畫像のアップロードを?qū)g裝する前に、React Quill がインストールされ、構(gòu)成されていることを確認(rèn)してください。

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 ツールバーをカスタマイズし、畫像ハンドラーを設(shè)定する必要があります。

ステップ 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: ハンドラーを登録する

ハンドラーをモジュール構(gòu)成に渡します:

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'));

アップロードされた畫像のスタイリング

CSS を使用して、エディターで畫像のスタイルを設(shè)定できます。例:

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

結(jié)論

React Quill に畫像アップロード機(jī)能を追加すると、リッチ コンテンツを作成する際の使いやすさが向上します。ツールバーをカスタマイズし、カスタム畫像ハンドラーを?qū)g裝することで、ユーザーが畫像をシームレスにアップロードおよび埋め込むことができるようになります。これをファイルのアップロードを処理する堅(jiān)牢なバックエンドと組み合わせると、アプリケーションに完全に機(jī)能するソリューションが得られます。

參考文獻(xiàn)

1. React Quill のドキュメント
2. QuillJS ドキュメント
3. Multer ドキュメント
4. React Quill チュートリアル

以上がReact Quill での畫像アップロードの実裝の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。