介绍
在前端开发中，Slate.js 是一款强大的富文本编辑器。它提供了大量的扩展点，使得我们可以很方便地扩展其功能及其 UI。其中 @jaxrtech/slate-suggestions 便是为 Slate.js 提供的一个常用扩展包。它能够实现在输入过程中，对输入内容进行实时的分析匹配，并提供一个由下拉列表组成的建议框，极大地提升了用户体验。本文将详细介绍如何安装和使用 @jaxrtech/slate-suggestions 包。
安装
在使用 @jaxrtech/slate-suggestions 之前，需要保证已经安装了 Slate.js。
npm install slate
安装完 Slate.js 后，使用以下命令安装 @jaxrtech/slate-suggestions:
npm install @jaxrtech/slate-suggestions
当然，也可以使用 yarn 进行安装。
使用
使用 @jaxrtech/slate-suggestions 非常简单，只需三个步骤。在这里我们将依照示例代码逐步给出详细说明。
Step 1
在 Slate.js 的 document 中定义下列方法：
-- -------------------- ---- -------
-- ----- --------
--- ------ - ---
-------- ----------------- ------- -
--------------------
------ ---------------
-
-------- -------- -
----- ------ - --- -------- ----- ---
--------------------------- --------
------------------------
-
-------- ---------------- - ---------- -- -
----- - ------ - -------- - - - -------
-- ------ ---------- ---- ------ -----------
----- -------------------- - -------------------- --
------- --- ------------- --
-------------------------- --- - --
--------------------- -------------
--
--- ------ -- -- --------------------- -
---------
-
-这段代码展示了 Slate.js 的 event recorder，可以将用户的操作记录下来。这里我们定义了三个方法：applyChange、change 和 onChange。这三个方法在后续的代码中都将被调用。
Step 2
在 react 的组件函数中，定义 SlateEditor 渲染器：
-- -------------------- ---- ------- ------ - ----------------- - ---- ------------------------------ ----- ------- - ---------------------- -------- ------------------ - ----- ------- --------- - ---------------------- ----- ------ - ---------- -- -------------------------- ---- -------------- - -------- ---
此段代码中，我们引入了 SuggestionsPlugin 并将其加入到了 editor 的 plugins 列表中。注意到我们还需要定义一个 useState 变量 value 和一个 useEffect 函数，将 value 的值更新为 props.value。这里我们使用的 editor 是 createEditor() 的返回值。
Step 3
定义 SlateEditor 的显示效果，同时提供 Suggestions 补全功能：
-- -------------------- ---- -------
-------- ------------------ -
---
------ -
------
---------------
-------------
------------------ -- -------------------
-
---
---------------------------- -- --
----------------- ------- --------------- ---
--
------------
---------------
-------------
-------------
-------------------- -- -
----- - ------ - -------- - - - -------
----- ---------- - --
----- --------------
----- -----------------------------------------------------
-- -
----- --------------
----- ---------
--- -----------------------------------
---
-------------------------
--
--
--------
--
-在此代码中，我们提供了对 Suggestion 补全选项的配置。Suggestion 是一个 react 组件，它接收以下三个参数：
- editor：当前编辑器的 editor 对象。
- query：需要补全的关键字。
- items：作为补全项的字符串列表。
- onChange：选中补全选项后，更新 editor 中的内容。
本代码中，我们使用的 query 是输入框中已经存在的字符，items 是一个字符串数组，内容是系统已经记录的字符，onChange 函数则是在补全选项被选中时，将补全项的内容替换到当前编辑位置上。
示例代码
完整示例代码如下：
-- -------------------- ---- -------
------ ------ - -------- -------- - ---- --------
------ - ------------- ------ -- ----------- ---------- - ---- --------
------ - --------- - ---- --------------
------ - ------------------ ----------- - ---- ------------------------------
-- ----- --------
--- ------ - ---
-------- ----------------- ---- ------- ---- -
--------------------
------ ---------------
-
-------- -------- -
----- ------ - --- -------- ----- ---
--------------------------- --------
------------------------
-
-------- ---------------- ---- - ---------- -- ---- -
----- - ------ - -------- - - - -------
-- ------ ---------- ---- ------ -----------
----- -------------------- - -------------------- --
------- --- ------------- --
-------------------------- --- - --
--------------------- -------------
--
--- ------ -- -- --------------------- -
---------
-
-
----- ------- - ----------------------
------ -------- ------------------ - ------ --- -- -
----- ------- --------- - ----------------------
----- ------ - ---------- -- -------------------------- ----
-------------- - --------
------ -
------
---------------
-------------
------------------ -- -------------------
-
---------
------------------ ---- --------
-----------------------------
---------------------
--
---------------------------- -- --
----------------- ------- --------------- ---
--
------------
---------------
-------------
-------------
-------------------- -- -
----- - ------ - -------- - - - -------
----- ---------- - --
----- --------------
----- -----------------------------------------------------
-- -
----- --------------
----- ---------
--- -----------------------------------
---
-------------------------
--
--
--------
--
-总结
到这里，我们就完成了 @jaxrtech/slate-suggestions 的安装和使用，而且章程详细，使用方法清晰。希望小编的这篇文章能够对你有所帮助。对于未来的前端开发工作，我们也应该充分利用各种强大的技术和插件来提升我们的开发效率和用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bc5967216659e2443a6