WordPress 是最流行的 CMS 之一，拥有庞大的社区和插件库。@wordpress/editor 就是其中之一，是 WordPress 开源社区提供的一款用于编辑器的 npm 包。这个包由于其高度可扩展性而被广泛应用于 WordPress 中。
安装
在使用 @wordpress/editor 之前，需要确保你已经安装了 Node.js 和 npm，然后在终端中运行以下命令进行安装：
npm install @wordpress/editor --save
基础使用
使用 @wordpress/editor 的第一步是从这个包中导入需要的模块。它提供了一系列模块来帮助你构建自定义编辑器。
下面是一个简单的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - -- - ---- ------------------
------ - -------- - ---- -------------------------
----- ------------- - ------- -- -
----- - ----------- - ------- -- ------------- - - ------
------ -
---------
-----------
---------------
---------------------- -- --------------- -------- ---------- ---
------------- --- ------ ---- ------- ------ ----------- - -
--
--
--
------ ------- --------------上面的代码中，在 React 中创建了一个名为 EditComponent 的函数组件，组件渲染了一个 RichText 组件，该组件提供了常用的富文本编辑器的功能。现在，我们可以在 WordPress Gutenberg 编辑器中使用这个组件。
进阶使用
@wordpress/editor 不仅提供可视化编辑器的组件，还提供了很多其它的模块。下面介绍其中一部分：
1. @wordpress/api-fetch
@wordpress/api-fetch 是一个轻量级的库，用于执行 AJAX 请求。使用这个库，你可以轻松地向 WordPress REST API 提交请求。
下面是一个简单的示例代码：
-- -------------------- ---- -------
------ - -- - ---- ------------------
------ -------- ---- -----------------------
------ ----- --------- - ----- -- -- -
----- ------ - ----- ----------
----- ---------------
------- ------
---
------ -------
-在上面的代码中，定义了一个名为 fetchData 的异步函数，它向 WordPress REST API 发送一个 GET 请求，并返回结果。
2. @wordpress/data
@wordpress/data 是一个非常重要的模块，提供了一个通用的状态管理系统，可以用于存储数据、调度动作和注册选择器。这个模块的实际应用非常广泛，在开发 WordPress 插件时，它是不可缺少的一部分。
下面是一个简单的示例代码：
import { registerStore } from '@wordpress/data';
import reducer from './reducer';
registerStore('my-plugin', { reducer });上面的代码中，我们使用 registerStore 函数来注册一个名为 my-plugin 的状态，并传入一个 reducer。
3. @wordpress/blocks
@wordpress/blocks 是一个强大的模块，提供了一些高级功能来构建可重用的可视化组件。使用这个模块，你可以构建自己的 Gutenberg 编辑器块并在 WordPress 中使用它们。
下面是一个简单的示例代码：
-- -------------------- ---- -------
------ - ----------------- - ---- --------------------
------ ------------- ---- ---------
----------------------------------------- -
------ --- ----- ------- ----------- --
----- ---------
--------- ---------
----- --------------
----- -- -- ---
---在上面的代码中，我们使用 registerBlockType 函数来注册一个名为 my-plugin/test-block 的新编辑器块。
小结
在本文中，我们了解了如何使用 @wordpress/editor 模块来创建可重用的组件。我们对这个包的基础和进阶使用进行了讨论。此外，我还提供了几个示例代码，以帮助更好地理解这个包的使用方法。
@wordpress/editor 提供了强大的功能，可以用于构建自定义 Gutenberg 编辑器块。正因为如此，掌握这个包所提供的技术对于前端开发人员来说是非常重要的。希望这篇文章对你们有所帮助，感谢阅读。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb46eb5cbfe1ea061128b