React Editor like UMEditor
npm install react-umeditor js
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"
}
}
}
}
render(){
var icons = this.getIcons();
var plugins = this.getPlugins();
return (
value={this.state.content} defaultValue="React Umeditor
"
onChange={this.handleChange.bind(this)}
plugins={plugins} />)
}
}
`
html
` html
Editor Demo
`
Example
- react-umeditor-example
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 }`