react-umeditor

React Editor like Umeditor

Install

npm install react-umeditor-pans --save

Use

javascript

var React = require('react');
var Editor = require('react-umeditor');

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": { 
				"uploader": { 
					"name":"file", 
					"url": "/api/upload",
					"split_field":"/media",  //如果不需要截取图片不需要传下面2个参数，这个参数是截取的关键
                    "split_replace":"http://XXX.XXXXX.com:6540/media",   //截取之后替换前面的IP+端口,传空或者不传的话默认是空
				} 
			} 
		}
	}
	render(){
	    var icons = this.getIcons();
		var plugins = this.getPlugins();
		return (<Editor ref="editor" 
			icons={icons} 
			value={this.state.content} defaultValue="<p>React Umeditor</p>" 
			onChange={this.handleChange.bind(this)} 
			plugins={plugins} />)
	}
}