| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118 | 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) {        if (this.state.theBool && nextProps.textContent) {            this.state.value = nextProps.textContent;            this.state.theBool = false;        }        if (this.props.visible && !nextProps.visible) {            this.state.theBool = true;            this.state.value = '';        }    },    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}                    onChange={this.handleRichText} />                <input type="file"                    name="fileToUpload"                    id="fileToUpload"                    style={{ "display": "none" }} />            </div>        )    },});export default Editors;
 |