react-富文本 react-editor react-contenteditable

自己写的一个简单的编辑器  尚在简洁 具体功能 加粗 斜体 下划线 链接地址 颜色字体大小 粘贴图片 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>

        );
    }
}

 

转载于:https://www.cnblogs.com/leijuan/p/7633123.html