React 配合 Ant Design 使用 react-draft-wysiwyg 富文本編輯器

Ant Design

Ant Design 是一個致力於提高『用戶』和『設計者』使用體驗的中臺設計語言。它模糊了產品經理、交互設計師、視覺設計師、前端工程師、開發工程師等角色邊界，將進行 UE 設計和 UI 設計人員統稱爲『設計者』，利用統一的規範進行設計賦能，全面提升中臺產品體驗和研發效率。

咱們採用 React 封裝了一套 Ant Design 的組件庫，也歡迎社區其餘框架的實現版本。

react-draft-wysiwyg

1. 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 配合 Ant Design 使用 react-draft-wysiwyg 富文本編輯器