React-umeditor-thinker NPM

Install

npm install react-umeditor-thinker --save

Use

javascript

import React from 'react';
import Editor from 'react-umeditor-thinker';

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 (<Editor ref="editor" 
			icons={icons} 
			value={this.state.content} defaultValue="<p>React Umeditor</p>" 
			onChange={this.handleChange.bind(this)} 
			plugins={plugins} />)
	}
}

html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Editor Demo</title>
	
	<!-- mathquill & umeditor stylesheet & if you have the formula icon -->
	<link rel="stylesheet" href="../../dist/third-part/mathquill/mathquill.css"/>
	
	<link rel="stylesheet" href="app.css" type="text/css" />
</head>
<body>
	<div id="react-container"></div>
	
	<!-- jquery & mathquill javascript & if you have the formula icon -->
	<script src="../../dist/third-part/jquery.min.js"></script>
	<script src="../../dist/third-part/mathquill/mathquill.js"></script>
	
	<!-- your react script -->
	<script src="bundle.js"></script>
	<script src="app.js"></script>
</body>
</html>

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 }
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

react react-umeditor

hmacsha1

@infinitebrahmanuniverse/nolb-react-um @everything-registry/sub-chunk-2620

1.0.1

6 years ago

1.0.0

6 years ago