react-富文本

Posted 2020-10-09 一朵梨花压海棠 18802686535

自己写的一个简单的编辑器  尚在简洁 具体功能 加粗 斜体 下划线 链接地址 颜色字体大小 粘贴图片 excel  截屏 拖拽 上传 功能都有 默认值 是否显示工具栏 是否可编辑  测试通过能实现软件开发大部分需求 可自己继续添加其他需求 

样子：

部分代码：

/**
 * Created by zhanglei on 2017/5/23.
 */
import React, { Component } from \'react\';
import { Modal,message } from \'antd\';
import PropTypes from \'prop-types\';
import \'./edit.less\'
import ToolBar from \'./toolBar\'
export default class Editor extends Component {
    static propTypes = {
        className: PropTypes.string,
        value:PropTypes.string,
        editColor:PropTypes.string,
    };
    constructor(props){
        super(props);
        this.state={
            value:null,
            tableData:[],
            linkModel:false,
            visible:false,
            isColor:false,
            editValue:\'\',
            myDisabled:false,
            isEdit:true,
            isFace:false,
            isBackground:false,
            linkValue:null,
            isSent:true,
        }
    };
    componentDidMount(){
        document.addEventListener(\'click\',this.documentClick);
    };
    moveToEnd = () =>{
        const range = window.getSelection();
        range.selectAllChildren(this.refs[\'inputText\']);
        range.collapseToEnd();
    };
    documentClick=(e)=>{
        const { isColor, isBackground } = this.state;
        if(isColor||isBackground){
            let en = e.srcElement||e.target;
            const name = \'.color-content\';
            while(en){
                if(en.className&&en.className === name.replace(\'.\',\'\')){
                    return;
                }
                en = en.parentNode;
            }
            this.setState({ isColor:false, isBackground:false });
        }
    };
    componentWillUnmount(){
        document.removeEventListener(\'click\',this.documentClick)
    }
    onPaste=(e)=>{
        let cbd = e.clipboardData;
        if ( !(e.clipboardData && e.clipboardData.items) ) {
            return ;
        }
        this.onParseOrDrop(cbd,e);
    };
    onDrop=(e)=>{
        e.preventDefault();
        let cbd = e.dataTransfer;
        if ( !(e.dataTransfer && e.dataTransfer.items) ) {
            return ;
        }
        this.onParseOrDrop(cbd,e);
    };
    onParseOrDrop = (cbd,e) =>{
        let ua = window.navigator.userAgent;
        if(cbd.items && cbd.items.length === 2 && cbd.items[0].kind === "string" && cbd.items[1].kind === "file" &&
            cbd.types && cbd.types.length === 2 && cbd.types[0] === "text/plain" && cbd.types[1] === "Files" &&
            ua.match(/Macintosh/i) && Number(ua.match(/Chrome\\/(\\d{2})/i)[1]) < 49){
            return;
        }
        if(cbd.items&&cbd.items.length === 4){
            document.createElement(\'table\');
            return false;
        }
        const myArray = Object.keys(cbd.items).map(item=>{
            return cbd.items[item];
        });
        const arr = myArray.some((u)=>{
            if(u.kind === \'file\'&&u.type!==\'image/jpeg\'&&u.type!==\'image/png\'){
                message.error(\'仅支持PNG或者JPG的图片格式上传\');
                return !1
            }
            return u.kind === \'file\'&&(u.type===\'image/jpeg\'||u.type===\'image/png\')
        });
        if(!arr) return !1;
        myArray.forEach(item=>{
            if(item.kind === \'string\'){
                e.preventDefault();
                return;
            }
            if(item.kind === "file"){
                e.preventDefault();
                const blob = item.getAsFile();
                if (blob.size === 0) return;
                this.bind_parse(blob);
            }
        })
    };
    bind_parse = (file) =>{
        const reader = new FileReader();
        reader.onload = ((e)=>{
            const newImg = `<img class="edit-img" title=\'点击放大\' src="${ e.target.result}"/>`;
            const {onChange} = this.props;
            if(onChange){
                onChange( this.inputText.innerhtml+newImg );
            }
        });
        reader.readAsDataURL(file);
    };
    textHtml=(e)=>{
        e.preventDefault();
        const {isEdit} = this.state;
        let html =null;
        if(isEdit){
            html = this.refs[\'inputText\'].innerHTML;
            this.refs[\'inputText2\'].value = html;
            this.setState({ isEdit:false, myDisabled:true });
        }else{
            html = this.refs[\'inputText2\'].value;
            this.refs[\'inputText\'].innerHTML = html;
            this.setState({ isEdit:true, myDisabled:false });
        }

    };
    emitChange = (e) => {
        const { onChange } = this.props;
        const html = e.target.innerHTML;
        if (onChange && html !== this.lastHtml) {
            onChange(html)
        }
        this.lastHtml = html;
    };
    shouldComponentUpdate(nextProps,nextState){
        return nextProps.value !== this.props.value||
            this.state.editValue !== nextState.editValue||
            this.state.visible !== nextState.visible||
            this.state.myDisabled !== nextState.myDisabled;
    }
    render() {
        const { isEdit, visible, myDisabled } = this.state;
        const { disabled, editColor } = this.props;
        const isDisabled = !(\'disabled\' in this.props) || !disabled;
        return (
            <div className="editor-full">
                {
                    isDisabled &&
                    <ToolBar
                        id={ this.props.id }
                        myDisabled={ myDisabled }
                        bind_parse={(this.bind_parse)}
                        textHtml={(this.textHtml)}
                    />
                }
                <div className="inputText" style={{ borderColor:editColor }}>
                    <div
                        className="input-content-edit"
                        onPaste={ this.onPaste }
                        onDrop={ this.onDrop }
                        onInput={this.emitChange}
                        contentEditable={ isDisabled }
                        onBlur={ this.emitChange }
                        dangerouslySetInnerHTML={{ __html:this.props.value }}
                        onClick={e =>{
                            if(e.target.title === \'点击放大\'){
                                this.setState({ url:e.target.src, visible:true })
                            }
                        }}
                        ref={ref =>this.inputText = ref}
                        style={{
                            display:isEdit ? \'block\' : \'none\',
                            height:isDisabled ? \'200px\' : \'auto\'
                        }}>
                    </div>
                    <textarea style={{ display:isEdit ? \'none\' : \'block\' }} ref="inputText2" id="editor-con"/>
                </div>
                <Modal
                    className="chat-model"
                    style={{ width:\'70%\' }}
                    visible={ visible }
                    footer={ null }
                    onCancel={() =>this.setState({ visible:false })}
                >
                    <img src={this.state.url} alt="img"/>
                </Modal>
            </div>

        );
    }
}