kede-HN-officialWeb-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()
    let 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.avatarUploadHost + data.data
                );
                s.quill.setSelection(cursorPosition + 1)
            };
        }
    })
}
//图片文件选择
function fileSelect() {
    let uploader = document.getElementById("fileToUpload");
    if (!uploader.onchange) {
        uploader.onchange = () => {
            uploadImg(this)
        }
    }
    uploader.click();
}
//视频文件选择
function fileSelectVideo() {
    let uploader = document.getElementById("fileToUploadVideo");
    if (!uploader.onchange) {
        uploader.onchange = () => {
            uploadVideo(this)
        }
    }
    uploader.click();
}
//视频文件上传
function uploadVideo(s) {
    let myform = new FormData()
    let file = document.getElementById("fileToUploadVideo").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, "video", globalConfig.avatarUploadHost + data.data );
                s.quill.setSelection(cursorPosition + 1)
            };
            console.log("上传成功")

        },
        error: function(XMLHttpRequest, textStatus, errorThrown){
            //查看错误信息
            message("上传失败");
        }
    })
}

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','video'],
                    ['clean']
                ],
                handlers: { 'image': fileSelect ,'video': fileSelectVideo}
            }
        };
        const formats = [
            'size', 'header',
            'bold', 'italic', 'underline', 'strike', 'blockquote',
            'list', 'bullet', 'indent',
            'color', 'background',
            'align',
            'link', 'image','video'
        ];
        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" }} />
                 <input type="file" name="fileToUploadVideo" id="fileToUploadVideo" placeholder='请填写视频！' style={{ "display": "none" }} />
            </div>
        )
    },
});

export default Editors;