Каким образом можно загрузить изображение через редактор ReactQuill?

Как решить проблему, связанную с тем, что редактор исчезает после ввода первой буквы, и как это может помочь в проверке работы кода для отправки изображения на сервер?
  • 2 ноября 2023 г. 6:09
Ответы на вопрос 2
Чтобы загрузить изображение через редактор ReactQuill, вам потребуется настроить обработчик загрузки изображений и добавить соответствующие настройки редактора.

1. Установите пакеты react-quill и axios:
```
npm install react-quill axios
```

2. Импортируйте необходимые модули:
```jsx
import ReactQuill, { Quill } from 'react-quill';
import 'react-quill/dist/quill.snow.css';
import axios from 'axios';
```

3. Создайте компонент с редактором:
```jsx
class MyEditor extends React.Component {
  constructor(props) {
    super(props);
    this.state = { content: '' };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(content) {
    this.setState({ content });
  }

  handleImageUpload(file) {
    const formData = new FormData();
    formData.append('image', file);

    return axios.post('URL_сервера_для_загрузки_изображений', formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    })
    .then(response => {
      const imageUrl = response.data.imageUrl;
      const quill = this.quillRef.getEditor();
      const range = quill.getSelection();
      quill.insertEmbed(range.index, 'image', imageUrl);
    })
    .catch(error => {
      console.log(error);
    });
  }

  componentDidMount() {
    this.quillRef = null;
    Quill.register('modules/imageUploader', ImageUploader);
    Quill.register('formats/image', Image);

    const toolbarOptions = [
      ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
      ['blockquote', 'code-block'],
  
      [{ 'header': 1 }, { 'header': 2 }],               // custom button values
      [{ 'list': 'ordered'}, { 'list': 'bullet' }],
      [{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript
      [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
      [{ 'direction': 'rtl' }],                         // text direction
  
      [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
      [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
  
      [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
      [{ 'font': [] }],
      [{ 'align': [] }],
  
      ['clean'],                                         // remove formatting button
  
      ['link', 'image', 'video']                         // link and image, video
    ];
  
    const modules = {
      imageUploader: {
        upload: file => {
          return this.handleImageUpload(file);
        }
      }
    };
  
    const formats = [
      'bold', 'italic', 'underline', 'strike',
      'blockquote', 'code-block',
      'header', 'list', 'script', 'indent', 'direction',
      'size', 'color', 'background', 'font', 'align',
      'link', 'image', 'video'
    ];

    const quillOptions = {
      modules: {
        toolbar: toolbarOptions,
        imageUploader: {
          upload: file => {
            return this.handleImageUpload(file);
          }
        }
      },
      formats: formats
    };

    this.quillRef = this.refs.quillRef;
    this.quillRef.editor.setContents([{ insert: '\n' }]);
  }

  render() {
    return (
      <ReactQuill
        ref="quillRef"
        value={this.state.content}
        onChange={this.handleChange}
        modules={quillOptions.modules}
        formats={quillOptions.formats}
      />
    );
  }
}

export default MyEditor;
```

В этом примере мы определяем обработчик `handleImageUpload()`, который принимает файл изображения, создает объект `FormData`, и отправляет его на сервер с помощью библиотеки axios. После успешной загрузки изображения, URL изображения добавляется в содержимое редактора с помощью методов Quill API.
Чтобы загрузка изображений работала, вам нужно заменить `'URL_сервера_для_загрузки_изображений'`
нужно завернуть модули в useMemo 

const modules = useMemo(() => ({
        toolbar: {
            container: toolbarOptions,
            handlers: {
                image: handleImageUpload
            }
        }
    }), [])

 return (
        <ReactQuill
    ref={quillRef}
    value={description}
    onChange={setDescription}
    modules={modules}
/>)
Похожие вопросы