管理后台有个常见的需求，就是富文本编辑框，可以输入标题字体颜色链接什么的。这个功能看着好像麻烦，但是有很好的组件可以使用，就是ueditor。下面就来说一下怎么在React框架里面集成这个组件。
1.在ueditor的github官网下载最新的dev-1.5.0版本（其它版本有些小bug），然后按照github里面的说明安装打包组件
git clone https://github.com/fex-team/ueditor.git
npm install 安装依赖
npm install -g grunt-cli （如果没有安装 grunt , 请先在全局安装 grunt）
在终端执行 grunt default
2.grunt之后就会在dist目录里面生成打包好的组件，把这个文件夹复制到react的public目录下面，在项目的index.ejs里面添加引入ueditor组件
<!-- 配置文件 -->
<script type="text/javascript" src="<%= webpackConfig.output.publicPath %>ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="<%= webpackConfig.output.publicPath %>ueditor/ueditor.all.min.js"></script>
这里的<%= webpackConfig.output.publicPath %>就是项目public目录，打包之后的路径配置。
3.把ueditor封装成一个组件，方便在页面统一调用修改，封装ueditor的组件index.js和配置文件config.js。
这些富文本框的配置可以从这里查询http://fex.baidu.com/ueditor/#start-toolbar
4.在需要的页面，引入这个组件import Ueditor from 'components/Ueditor'; <Ueditor id={'text'} value={this.props.info && decodeURI(this.props.info)} callback={content => this.editorChange(content)} />
教程：http://ueditor.baidu.com/website/download.html#ueditor
参考：https://www.jianshu.com/p/ac2b9b20fdc9
最后附上几个截图
来源：oschina
链接：https://my.oschina.net/u/2606060/blog/3196772