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