最新消息:看到那些跳动的图片、文字了吗?点击点击 O(∩_∩)O~~

React 配合 Ant Design 使用 react-draft-wysiwyg 富文本编辑器

若思若想 onlyling 10021浏览 0评论

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 版本,没有问题。

转载请注明:OnlyLing - Web 前端开发者 » React 配合 Ant Design 使用 react-draft-wysiwyg 富文本编辑器

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

网友最新评论 (4)

  1. 安装了react-draft-wysiwyg之后怎么配置啊,才能结合antdesign使用
    阿琼2018-04-23 16:19 回复
    • 可以参考官方案例的。 配合 Ant Design 只是样式上和官方案例有点小差异,需要修改一些样式。
      onlyling2018-05-08 09:41 回复
      • 目前能支持最新版了吗
        lfire2018-06-19 15:14 回复
        • 看官方仓库,应该支持了。
          onlyling2018-06-19 21:48 回复