react-quill 富文本编辑器 ---- 图片处理

最新推荐文章于 2025-04-22 09:40:01 发布

weixin_30780221

最新推荐文章于 2025-04-22 09:40:01 发布

阅读量1.4k

点赞数

文章标签： javascript 后端 json ViewUI

原文链接：http://www.cnblogs.com/tsgxj/p/10682204.html

版权

本文探讨了在使用React-quill富文本编辑器时如何进行图片处理，包括上传、显示和编辑等操作，适合后端与前端开发者参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

import React,{Component} from 'react';
import ReactQuill,{ Quill } from 'react-quill';
import 'react-quill/dist/quill.snow.css';
import { Button ,Modal,message} from 'antd';
import MYURL  from '../api/config';
import { ImageDrop } from 'quill-image-drop-module';
Quill.register('modules/imageDrop', ImageDrop);

class Editer extends Component {
    constructor(props) {
        super(props)
        this.state = { text: '' } // You can also pass a Quill Delta here
        this.handleChange = this.handleChange.bind(this)
        this.selectImage = this.selectImage.bind(this);
        this.changeImageBeforeUpload = this.changeImageBeforeUpload.bind(this);
        this.uploadForImage = this.uploadForImage.bind(this);
        this.imageHandler = this.imageHandler.bind(this);
        this.showUploadBox = this.showUploadBox.bind(this);
        this.hideUploadBox =this.hideUploadBox.bind(this);
        this.handleUpload =this.handleUpload.bind(this);
    }
    handleChange(value) {
        // if (value) ReactQuill.getSelection().dangerouslyPasteHTML(value);
        this.setState({ text: value })
    };
    modules={
   //富文本配置
        toolbar:{
            container:[
                [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
                ['bold', 'italic', 'underline', 'strike','blockquote'],

最低0.47元/天解锁文章