- 博客(0)
- 资源 (1)
空空如也
react 富文本
支持拖拽 复制 截图 excel ----------------------------------------------------------------------------------------------------------------------------------------------复制代码
/**
* Created by zhanglei on 2017/5/23.
*/
import React, { Component, PropTypes } from 'react';
import { Icon,Modal,message } from 'antd';
import ContentEditable from 'react-contenteditable'
import './edit.less'
export default class Editor extends Component {
static propTypes = {
className: PropTypes.string,
value:PropTypes.string,
editColor:PropTypes.string,
};
constructor(props){
super(props);
['inputTextChange','onchangefile','onpaste','ondrop','onParseOrDrop'].map(item=>this[item]=this[item].bind(this));
this.state={
value:null,
tableData:[],
linkModel:false,
visible:false,
isColor:false,
myDisabled:false,
isEdit:true,
isFace:false,
isBackground:false,
linkValue:null,
editStatus:[
{label:'加粗',value:'bold',icon:'zitijiacu'},
{label:'斜体',value:'italic',icon:'zitixieti'},
{label:'下划线',value:'underline',icon:'xiahuaxian'},
{label:'链接',value:'createLink',icon:'lianjie'}
],
fontSizeData:[
{title:'大号',value:'h1',icon:'H1'},
{title:'中号',value:'h2',icon:'h2'},
{title:'正常',value:'h3',icon:'h3-copy-copy'},
{title:'小号',value:'h4',icon:'h4'}
],
isSent:true,
colorData:[
'red','orange','yellow','#01FF01','#98F5FF','#8686FF','rgb(216, 154, 255)', '#fff',
'#DE1607','#E49402','#E2E205','#04DE04','rgb(71, 237, 255)','#6363F9','rgb(204, 123, 255)', 'rgb(206, 205, 205)',
'#C10303','#D08702','#C5C503','#07C307','rgb(0, 221, 245)','#4C4CFB','rgb(184, 70, 255)', 'rgb(183, 183, 183)',
'#960505','#AB7005','#ABAB03','#02A902','rgb(6, 171, 189)','#3333FF','rgb(167, 25, 255)', 'rgb(148, 148, 148)',
'#710303','#989805','#989805','#059C05','rgb(9, 138, 152)','blue','#A020F0', 'rgb(76, 75, 75)',
'#5D0404',' #757504','#757504','green','rgb(2, 99, 109)','blue','#A020F0', '#000','rgb(56, 2, 2)'
],
}
};
componentDidMount(){
document.addEventListener('click',this.documentClick);
};
componentWillReceiveProps(nextProps){
if('value' in nextProps&&this;.state.editValue !== nextProps.value){
this.setState({editValue:nextProps.value})
}
}
//全局取消隐藏颜色框
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[removed];
}
this.setState({isColor:false,isBackground:false});
}
};
//卸载颜色框
componentWillUnmount(){
document.removeEventListener('click',this.documentClick)
}
/*
* <粘贴功能>
* @param onParseOrDrop 通用方法
2017-10-28
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人