前言
在网上可以找到很多种常用的富文本编辑器，但多数情况下我们需要根据实际产品需要自己二次开发来满足特定的需求。而随着 React 技术的逐渐成熟和广泛应用，@atlaskit/editor-hipchat这个 npm 包逐渐受到前端开发者的关注和使用。
本文将详细介绍如何使用@atlaskit/editor-hipchat这个 npm 包，并附上具体代码，希望对初学者有所帮助。
步骤
1. 安装 @atlaskit/editor-hipchat
@atlaskit/editor-hipchat是一个专为 React 开发提供的，轻量且易于使用的富文本编辑器。
通过 NPM 包管理工具可以很容易的安装：
npm install --save @atlaskit/editor-hipchat
2. 引入@atlaskit/editor-hipchat
在你的 React 组件中，首先需要引入@atlaskit/editor-hipcha包。
import React, { Component } from 'react';
import Editor from '@atlaskit/editor-hipchat';3. 使用 Editor 组件
在你的页面代码中，你可以像下面这个样子使用该组件。
-- -------------------- ---- -------
----- --- ------- --------- -
----- - -
-------- ---
--
-------------- - ------- -- -
---------------
-------- ------
--
--
-------- -
----- - ------- - - -----------
------ -
-----
-------
------------------------------
-----------------------
--
------
-
-
-这里我们定义了一个 App 组件，在该组件中我们定义了一个 content 状态用于存储富文本编辑器的内容。我们还定义了一个 editorOnChange 函数，用于每次编辑器发生改变时进行存储。
然后我们在 React 的 render 方法中，通过 jsx 语法对Editor 组件进行调用。该组件的 placeholder 属性用于在编辑器中输入内容前进行提示。
4. 数据双向绑定
如果我们希望实现数据双向绑定，我们需要引入另外一个 npm 包 draft-js。通过 draft-js 提供的方法我们可以将富文本编辑器中的内容转换成普通文本，也可以将普通文本转换为富文本编辑器中的样式。
首先我们需要安装该 npm 包：
npm install --save draft-js
接下来，我们需要改造上一步的 App 组件：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ------ ---- ---------------------------
------ - ------------ ------------- -------------- - ---- -----------
----- --- ------- --------- -
----- - -
------------ --------------------------
-------- ---
--
-------------- - ------------- -- -
----- ------- - ----------------------------------------------
---------------
-------- ------------------------
------------
---
--
-------------------- -
--- -
----- ----------- - -------------------------------------------
-- ------------- -
---------------
------------ -----------------------------------------------------------
--
-
- ----- --- - -
-
------------------- -
--------------------------------------- -- -- -
------------------------------- --------------------
--
-
-------- -
----- - ----------- - - -----------
------ -
-----
-------
-------------------------
------------------------------
-----------------------
--
------
-
-
-这里我们通过 EditorState.createEmpty() 创建了一个空富文本状态，convertToRaw(editorState.getCurrentContent()) 用于将当前编辑器内容转换成普通的 JSON 格式，JSON.stringify(rawJson) 用于将其转化为字符串进行存储。
在 componentWillMount 和 componentDidMount 中我们使用 LocalStorage 对编辑器内容进行缓存和恢复操作。
最后，我们将 editorState 作为 Editor 组件的 props 传入，完成数据双向绑定的操作。
结论
本文详细介绍了如何使用@atlaskit/editor-hipchat这个 npm 包来快速实现富文本编辑器，并通过 draft-js 实现了数据双向绑定。如果您感兴趣于此，欢迎下载示例代码进行学习和深入研究。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005642281e8991b448e1509