react umeditor下载 - react umeditor源代码下载

react umeditor

其他资源

1.0.0

下载

React-Umeditor

React Editor像UMeditor

安装

 npm install react-umeditor --save

使用

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

例子

反应 - 杂物示例

参考功能

您可以this.refs.editor.xxx() ！ xxx可能如下：

FindDomnode：通过参考名称"root","editarea","toolbar","color"查找参考
setContent：set html编辑器
getContent：获取编辑器的HTML
专注者：重点编辑器

道具

您可以设置props ！ props也许如下：

onfocus：焦点事件
onChange：文本更改事件{ content: string }
DefaultValue：编辑器的默认值
价值：编辑器的价值
图标：工具栏的图标
插件：插件的设置
- 工具栏：工具栏设置
  - 图标：自定义图标
    - 名称：图标的名称
    - 标题：图标标题
    - MoniconClick：处理活动
    - maprangestate：滤波器rangestate
    - 道具：图标和组件的道具
    - 组件：自定义组件，例如。对话
- 图像：图像对话框的设置
  - 上传器：图像上传器的设置
    - 名称：XHR的表格名称
    - URL：服务器的URL
    - 数据：XHR的其他formdata
    - 过滤器：过滤器JSON风格的身体
  - CustomUploader：自定义文件上传器（请参阅FileUploader）

图标

支持图标，如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

快照

发展

 // clone code
git clone https://github.com/liuhong1happy/react-umeditor
cd react-umeditor
// install require
npm install
// build
npm run build
// run example server
cd example
npm run example