前言
在前端开发过程中，我们经常会用到富文本编辑器，slate.js 是一个灵活的富文本编辑器框架，由于其高度可定制化和易于扩展的特点，受到了开发者的广泛喜爱。
在实际使用过程中，我们可能需要给富文本编辑器添加一些自动补全的功能，这时需要借助一些插件来实现。今天我们要介绍的就是一款实现 slate.js 自动补全的 npm 包：slate-autocomplete。
安装
使用 npm 安装 slate-autocomplete：
npm install slate-autocomplete --save
使用
我们先来看一下 slate-autocomplete 的基本用法。首先要导入 slate-autocomplete 插件：
import { withAutoComplete } from 'slate-autocomplete';通过调用 withAutoComplete 方法来增强 slate 编辑器：
const editor = withAutoComplete(slateEditor, options);
其中 options 是一个配置对象，具体可以参考官方文档。
接下来我们需要在编辑器中使用自动补全功能。我们以输入 @ 触发自动补全为例：
-- -------------------- ---- -------
----- --------------------- ------- --------------- -
--------- - ------- ------- ----- -- -
-- ---------- --- ---- -
-- -- - -------
--------------------------
------ -
- ----- ----- --
- ----- ------- --
- ----- --------- --
--
------------------------- -
------ ----------------
--
-------------- -
-- --------- ----
--------------------------------------------------------
-
---
-- ------
-----------------------
-------
-
-------
--
-------- -
----- ------ - ------------------
----- - ------------ - - -------
------ -
-------
---------------
--------------------------
-------------- -- -
--------- -- ----------------------- - --------------
--
--
--
-
-通过传入一个 items 数组来指定候选项，以及 formatSelectedValue 方法和 onSelect 方法来指定选中后的处理逻辑。
有了以上基础，我们可以在此基础上进行扩展，实现更加丰富的自动补全功能。
自动补全多行代码
有些情况下，我们需要自动补全多行代码。在这种情况下，我们可以在输入触发自动补全的字符（如 (）后，打开一个 modal 显示待选项，让用户自由选择。
-- -------------------- ---- -------
----- ------------------------------ ------- --------------- -
--------- - ------- ------- ----- -- -
-- -------
----- - ----- - - -------
----- - ---------- - - ------
----- - ----- - - ----------------
----- ---------------- - ------------------------ --------------
----- ----- - ---------------------------------
----- -------- - ----- -- ---------
-- ---------- --- --- -- --------- -
-- -- - ------ ------- ---------
----- ------- - -
-
------ --- ----------- --- -----
------ --- -----------
--
-
------ ---- ---- - - -- - - -- ---- --- -----
------ ---- ------
--
-
------ ------ ----------- --- -----
------ ------ ------
--
--
--------------------------
--------
--------- ------ -- -
--------------------------------
--
---
-----------------------
-------
-
-------
--
-------- -
----- ------ - ------------------
----- - ------------ - - -------
------ -
-------
---------------
--------------------------
-------------- -- -
--------- -- ----------------------- - --------------
--
--
--
-
-小结
通过使用 slate-autocomplete，我们可以轻松地实现自动补全功能，提高编辑器的效率和用户体验。在实际应用中，我们可以根据需求进行灵活操作，扩展自己的自动补全功能。
示例代码
完整的使用示例代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- --------------
------ - ---------------- - ---- ---------------------
----- --------------------- ------- --------------- -
--------- - ------- ------- ----- -- -
-- ---------- --- ---- -
-- -- - -------
--------------------------
------ -
- ----- ----- --
- ----- ------- --
- ----- --------- --
--
------------------------- -
------ ----------------
--
-------------- -
-- --------- ----
--------------------------------------------------------
-
---
-- ------
-----------------------
-------
-
-------
--
-------- -
----- ------ - ------------------
----- - ------------ - - -------
------ -
-------
---------------
--------------------------
-------------- -- -
--------- -- ----------------------- - --------------
--
--
--
-
-
----- ------------------------------ ------- --------------- -
--------- - ------- ------- ----- -- -
-- -------
----- - ----- - - -------
----- - ---------- - - ------
----- - ----- - - ----------------
----- ---------------- - ------------------------ --------------
----- ----- - ---------------------------------
----- -------- - ----- -- ---------
-- ---------- --- --- -- --------- -
-- -- - ------ ------- ---------
----- ------- - -
-
------ --- ----------- --- -----
------ --- -----------
--
-
------ ---- ---- - - -- - - -- ---- --- -----
------ ---- ------
--
-
------ ------ ----------- --- -----
------ ------ ------
--
--
--------------------------
--------
--------- ------ -- -
--------------------------------
--
---
-----------------------
-------
-
-------
--
-------- -
----- ------ - ------------------
----- - ------------ - - -------
------ -
-------
---------------
--------------------------
-------------- -- -
--------- -- ----------------------- - --------------
--
--
--
-
-使用时可以在需要自动补全功能的 Editor 里面包裹上面代码中的组件即可。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067355890c4f7277583a48