1.0.5 • Published 6 years ago
react-umeditor-eatwood v1.0.5
react-umeditor
- rewrite from react-umeditor !!!!! liuhong1happy
React Editor like Umeditor
Install
npm install react-umeditor-eatwood --save
Use
javascript
import React, { Component } from 'react'
import Editor from 'react-umeditor-eatwood';
class App extends React.Component {
constructor(props){
super(props);
this.state = {
content: ""
}
}
handleChange(content){
this.setState({
content: content
})
}
getIcons(){
var icons = [
"source | undo redo | bold italic underline strikethrough fontborder emphasis | ",
"paragraph fontfamily fontsize | superscript subscript | ",
"forecolor backcolor | removeformat | insertorderedlist insertunorderedlist | selectall | ",
"cleardoc | indent outdent | justifyleft justifycenter justifyright | touppercase tolowercase | ",
"horizontal date time | image emotion spechars | inserttable"
]
return icons;
}
getPlugins(){
return {
"image": {
}
}
}
cb = (e) => { //自定义的图片上传
let url = `http://api.test.ucuxin.com/base/v3/Web/UploadAttachment?token=${your_token}&attachmentStr=${`{"Path":"ZJKJ","AttachType":1,"ExtName":".jpg","ResizeMode":1,"SImgResizeMode":2,"CreateThumb":true,"SImgMaxHeight":100,"SImgMaxWidth":100}`}`;
var fd = new FormData();
fd.append('filename', e);
return axios.post(url,fd).then(res => {
if(res.data.Ret==0){
let obj = { //必须的返回格式
status: "success",
data: {
image_src: res.data.Data.Url
}
};
return obj;
}
})
}
render(){
var icons = this.getIcons();
var plugins = this.getPlugins();
return (<Editor ref="editor" style={{width:750}} id='editor'
icons={icons}
value={this.state.content} defaultValue=""
onChange={this.handleChange.bind(this)}
uploadImageCallback={this.cb}
plugins={ plugins } />)
}
}
Ref Functions
You can this.refs.editor.xxx()
! The xxx
maybe is as follows:
- findDOMNode: find refs by ref name
"root","editarea","toolbar","color"
- setContent: set html of editor
- getContent: get html of editor
- focusEditor: focus the editor
Props
You can set the props
!The props
maybe is as follows:
- onFocus: the focus event
- onChange: the text change event
{ content: string }
- defaultValue: default value of editor
- value: value of editor
- icons: icons of toolbar
- plugins: settings of plugins image: settings of image dialog uploader: settings of image uploader name: form name of xhr url: url of server type: qiniu or default qiniu: when type is qiniu upload_token: upload_token of qiniu app: app of qiniu Bucket: Bucket of qiniu AK: AccessKey of qiniu SK: SecretKey of qiniu key: resource key of file * genKey: when not key,gen resource key of file
Icons
Support icons, As fllow:
source undo redo bold italic underline strikethrough fontborder emphasis
paragraph fontfamily fontsize superscript subscript
forecolor backcolor removeformat insertorderedlist insertunorderedlist selectall
cleardoc indent outdent justifyleft justifycenter justifyright touppercase tolowercase
horizontal date time image emotion spechars inserttable formula
notice
- rewrite from react-umeditor !!!!! liuhong1happy