目前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>