集成到React · wangEditor2使用手冊

目前`React`在前端開發中，正是如日中天的火。想要在`React`中使用wangEditor編輯器，下面給一個簡單的demo供參考。具體在項目中如何使用，需要根據情況具體分析，有問題可以在QQ群交流或者提交issue到github。注意：如果你此時使用了其他包管理工具，例如`seajs` `require.js`或者`webpack`，請參考：http://www.hmoore.net/wangfupeng/wangeditor2/113994 demo代碼如下： ```html <!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>  <script type="text/javascript" src="libs/JSXTransformer.js"></script> </head> <body> <div id="container">  </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> ```