前言
随着前端技术的发展，富文本编辑器在 Web 开发中的重要性也日益凸显。但是，开发一个功能完整、用户友好的富文本编辑器需要耗费大量的时间和精力。而 @atlaskit/editor-common 这个 npm 包为我们提供了一种快速搭建富文本编辑器的方式，让开发过程变得高效而简单。
关于 @atlaskit/editor-common
@atlaskit/editor-common 是由 Atlassian 公司开发和维护的一款开源富文本编辑器库。它基于 React，提供了一系列可靠、强大的功能，可以轻松地搭建新一代 Web 富文本编辑器。
@atlaskit/editor-common 涵盖了基础的文本编辑功能，如粗体、斜体、下划线、字体大小等，还支持插入多媒体资源，如图片、视频等。此外，它还提供了丰富的 API，可根据业务需求自定义编辑器的功能和样式。
安装和使用
安装 @atlaskit/editor-common 可以使用 npm 或者 yarn：
npm install @atlaskit/editor-common --save # 或者 yarn add @atlaskit/editor-common
导入编辑器组件：
import React, { Component } from 'react';
import { Editor } from '@atlaskit/editor-common';
class MyEditor extends Component {
render() {
return <Editor />;
}
}此时，你就可以在页面中渲染 MyEditor 组件和一个基础的富文本编辑器了。
自定义编辑器
我们可以通过配置 Editor 组件的 props 来自定义编辑器的功能和样式。以下是 @atlaskit/editor-common 提供的一些可用的 props：
- appearance：编辑器的外观，包括 full-page 和 comment。
- disabled：编辑器是否为只读模式。
- allowTextColor：是否允许设置文字颜色。
- allowTables：是否允许插入表格。
- allowPanel：是否允许插入面板。
- allowLists：是否允许插入有序或无序列表。
- allowTextAlignment：是否允许设置文字对齐方式。
- allowIndentation：是否允许缩进文本。
- allowRule：是否允许插入分隔线。
- allowDate：是否允许插入日期。
- allowCodeBlocks：是否允许插入代码块。
- allowHelpDialog：是否允许查看帮助文档。
- onChange：编辑器内容发生变化时的回调函数。
示例代码：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------ - ---- --------------------------
----- -------- ------- --------- -
------------ - ------- -- -
--------------------- -- -----------
--
-------- -
------ -
-------
----------------------
----------------
--------------
-----------
----------
------------- ------------------ ----- ---------------- ---- --
--------------------- ----------------- ----- ---------------- ---- --
----------------
---------
---------
---------------
---------------
----------------------------
--
--
-
-结语
@atlaskit/editor-common 提供了一个简单、易用且功能丰富的富文本编辑器库，可以在 Web 开发中大大提高开发效率。本文简单地介绍了它的安装、使用和自定义，希望对使用者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedaa8ab5cbfe1ea06104f1