Чтобы загрузить изображение через редактор 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_сервера_для_загрузки_изображений'`