jitao-client/js/component/richTextEditors.jsx

import React from 'react';
import theme from 'react-quill/dist/quill.snow.css';
import { message } from 'antd';
import ReactQuill from 'react-quill';

import ajax from 'jquery/src/ajax/xhr.js';
import $ from 'jquery/src/ajax';

var RichTextUploadUrl, RichTextUploadSign;
function uploadImg(s) {
    let myform = new FormData(), file = document.getElementById("fileToUpload").files[0];
    if (!file) {
        return;
    };
    myform.append('file', file);
    myform.append('sign', RichTextUploadSign);
    $.ajax({
        method: "post",
        dataType: "json",
        url: location.origin + RichTextUploadUrl,
        data: myform,
        contentType: false,
        processData: false,
        success: function (data) {
            if (data.error && data.error.length) {
                message.warning(data.error[0].message);
            } else {
                const cursorPosition = s.quill.getSelection().index
                s.quill.insertEmbed(cursorPosition, 'image', globalConfig.avatarHost + '/upload' + data.data)
                s.quill.setSelection(cursorPosition + 1)
            };
        }
    })
}
function fileSelect() {
    let uploader = document.getElementById("fileToUpload");
    if (!uploader.onchange) {
        uploader.onchange = () => {
            uploadImg(this)
        }
    }
    uploader.click();
}

const Editors = React.createClass({
    getInitialState() {
        return {
            value: null,
            theBool: true
        }
    },
    handleRichText(value) {
        this.setState({ value: value });
        this.props.handleRichText(value);
    },
    componentWillMount() {
        RichTextUploadUrl = this.props.uploadUrl;
        RichTextUploadSign = this.props.uploadSign;
    },
    componentWillReceiveProps(nextProps) {
            this.state.theBool = true;
            if(nextProps.textContent){
                this.state.value = nextProps.textContent;
            }
    },
    render() {
        const modules = {
            toolbar: {
                container: [
                    [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
                    [{ 'header': [1, 2, 3, false] }],

                    ['bold', 'italic', 'underline', 'strike', 'blockquote'],        // toggled buttons

                    //  [{ '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

                    [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
                    //  [{ 'font': [] }],
                    [{ 'align': [] }],
                    ['link', 'image'],
                    ['clean']
                ],
                handlers: { 'image': fileSelect }
            }
        };
        const formats = [
            'size', 'header',
            'bold', 'italic', 'underline', 'strike', 'blockquote',
            'list', 'bullet', 'indent',
            'color', 'background',
            'align',
            'link', 'image'
        ];
        return (
            <div>
                <ReactQuill theme="snow"
                    value={this.state.value}
                    modules={modules}
                    formats={formats}
                    placeholder='填写的内容可包括服务介绍、项目价值、申办要求、申办流程'
                    onChange={this.handleRichText} />
                <input type="file" 
                    name="fileToUpload"
                    id="fileToUpload"
                    placeholder='填写的内容可包括服务介绍、项目价值、申办要求、申办流程'
                    style={{ "display": "none" }} />
            </div>
        )
    },
});

export default Editors;