共计 959 个字符,预计需要花费 3 分钟才能阅读完成。
Ant Design
Ant Design
是一个致力于提升『用户』和『设计者』使用体验的中台设计语言。它模糊了产品经理、交互设计师、视觉设计师、前端工程师、开发工程师等角色边界,将进行 UE
设计和 UI
设计人员统称为『设计者』,利用统一的规范进行设计赋能,全面提高中台产品体验和研发效率。
我们采用 React
封装了一套 Ant Design
的组件库,也欢迎社区其他框架的实现版本。
react-draft-wysiwyg
A 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 版本,没有问题。
安装了react-draft-wysiwyg之后怎么配置啊,才能结合antdesign使用
可以参考官方案例的。
配合 Ant Design 只是样式上和官方案例有点小差异,需要修改一些样式。
目前能支持最新版了吗
看官方仓库,应该支持了。