集成到React

目前React在前端开发中，正是如日中天的火。想要在React中使用wangEditor编辑器，下面给一个简单的demo供参考。具体在项目中如何使用，需要根据情况具体分析，有问题可以在QQ群交流或者提交issue到github。

注意：如果你此时使用了其他包管理工具，例如seajs require.js或者webpack，请参考：http://www.niuguwen.cn/wangfupeng/wangeditor2/113994

demo代码如下：


<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>test1</title>
	
	<link rel="stylesheet" type="text/css" href="wangEditor/css/wangEditor.css">

	<script type="text/javascript" src="libs/react-0.13.3.js"></script>
	<!--在实际项目中，要在本地编译jsx文件，而不是使用在线编译-->
	<script type="text/javascript" src="libs/JSXTransformer.js"></script>
</head>
<body>
	
	<div id="container">
	    <!-- This element"s contents will be replaced with your component. -->
	</div>

	<script type="text/javascript" src="libs/jquery-2.2.1.js"></script>
	<script type="text/javascript" src="wangEditor/js/wangEditor.js"></script>
	<script type="text/jsx">
		var Editor = React.createClass({
			// 编辑器样式
			style: {
				width: "100%",
				height: "200px"
			},
		    render: function() {
		        return (
		        	<div>
			        	<div id={this.props.id} style={this.style} contentEditable="true"></div>
			        	<button onClick={this.getContent}>get content</button>
		        	</div>
		        );
		    },
		    componentDidMount: function () {
		    	var id = this.props.id;
		    	this.editor = new window.wangEditor(id);
		    	this.editor.config.uploadImgUrl = "/upload";
		    	this.editor.create();

		    	// 初始化内容
		    	this.editor.$txt.html(this.props.content);
		    },
		    // 获取内容
		    getContent: function () {
		    	var content = this.editor.$txt.html();
		    	console.log(content);
		    }
		});
		 
		React.render(
			<Editor id="editor1" content="<p>在react中使用wangEditor</p>"/>,
		    document.getElementById("container")
		);
	</script>
</body>
</html>