Ant Design
Ant Design 是一个致力于提升『用户』和『设计者』使用体验的中台设计语言。它模糊了产品经理、交互设计师、视觉设计师、前端工程师、开发工程师等角色边界，将进行 UE 设计和 UI 设计人员统称为『设计者』，利用统一的规范进行设计赋能，全面提高中台产品体验和研发效率。
我们采用 React 封装了一套 Ant Design 的组件库，也欢迎社区其他框架的实现版本。
react-draft-wysiwyg
- Wysiwyg editor build on top of ReactJS and DraftJS.
在 React 中使用富文本编辑器
目前我知道的富文本编辑器，当属百度的 ueditor （查看文档），但是太大、复杂了。
在支持 React 的编辑器中 react-draft-wysiwyg 星星比较多，看起来也很实用。
首先通过 create-react-app 脚手架初始化项目，然后配合 Ant Design 文档做一些修改。
react-draft-wysiwyg 的使用还是很简单的，按照 demo 上面的案例抄。
上传图片
好像在 demo 中没有看到服务器需要返回什么数据格式，可能是我眼拙，没看到。
搜索了一下，才知道，返回以下 json 格式的数据就可以了
{
"data": {
"link": "your Image Url"
}
}
中文工具栏
<Editor
localization={{ locale: 'zh' }}
/>
按钮大小
Ant Design 环境下的编辑器按钮都有点和 demo 不一样，其实都是 css 一些属性有关。
react-draft-wysiwyg 都是 Box-sizing: border-Box; 的属性。
react-draft-wysiwyg 是默认的属性，需要自定义一下 css 。
<Editor
localization={{ locale: 'zh' }}
wrapperClassName="wysiwyg-wrapper"
/>
.wysiwyg-wrapper * { Box-sizing: content-Box; }
一些兼容问题
create-react-app 默认使用最新的 React(16.0.0) 版本初始化项目，但是 react-draft-wysiwyg 目前对最新的 React 还有点小问题。
例如图片设置左中右的时候，悬浮窗口不可能被点击到。所有，手动退回到了 15 版本，没有问题。
