前言
在 Slate.js 编辑器中创建表格可以方便地展示数据并且让用户进行更好的交互体验。但是 Slate.js 默认没有提供表格编辑的功能，需要引入相应的插件。
@harveyprince/slate-edit-table 是一个可以用于在 Slate.js 编辑器中创建和编辑表格的 npm 包。在本文中，我们将为您介绍如何使用该 npm 包来在 Slate.js 中创建和编辑表格。
安装
在使用 @harveyprince/slate-edit-table 之前，需要先安装 Slate.js 和相应的插件。
使用 npm 命令行工具在项目中安装 Slate.js 和 @harveyprince/slate-edit-table：
--- ------- ----- ----------- ------------------------------
使用
初始化 Slate.js 编辑器
首先，我们需要初始化 Slate.js 编辑器
------ ------ - --------- -------- ----------- - ---- --------
------ - ------------ - ---- --------
------ - ------ --------- --------- - ---- --------------
----- ---------------- - -- -- -
----- ------- --------- - -----------------------
----- ------ - ---------- -- -------------------------------------- ----
----- ------------- - ------------------- -- -
------ -------------------- -
---- --------
------ ------------- ---------- ---
---- ------------
------ ---------------- ---------- ---
---- -------------
------ ----------------- ---------- ---
--------
------ --------------- ---------- ---
-
-- ----
------ -
------
---------------
-------------
-------------------- -- -------------------
-
--------- ----------------------------- --
--------
--
--创建表格
要在 Slate.js 编辑器中创建表格，首先我们要定义一个插入表格的函数
------ - ---------- - ---- -------- ------ - ------ --------- --------- - ---- --------------------------------- ----- ----------- - -------- ------- - -- ---- - -- -- - ----- ----- - --------------------- ------ ------------------------------ ------- --
然后我们将这个函数通过一个按钮触发
----- ----------------- - -- ------ -- -- -
-------
-------------------- -- -
-----------------------
--------------------
--
-
------ -----
---------
--编辑表格
@harveyprince/slate-edit-table 官方提供了一个 toolbar，在项目中添加该 toolbar 就可以对表格进行编辑。具体步骤如下：
首先定义一个 withTables 函数
------ - ------- ----------- ----- - ---- --------
------ - ----------- - ---- --------------
------ -
------
----------------
-------------------
--------------------
- ---- ---------------------------------
----- ---------- - -------- -- -
----- - --------------- ------------- - - -------
--------------------- - ------ -- -
----- - --------- - - -------
-- ---------- -- ----------------------------- -
----- ------ - --------------------------- -----------
-- ------ -
----- - --------- --------- - - -----
-- ---------- - -- -
------------------
-------
-------------
-
------- --------- - --
---- ---------
--
-
------- ----------
---- ---------
-
-
--
-------
-
-
---------------------
-
--
-------------------- - ------ -- -
----- - --------- - - -------
-- ---------- -- ----------------------------- -
----- ------ - --------------------------- -----------
-- ------ -
----- ----- - ----------------------- -------
----- - --------- --------- - - -----
----- -- ---- - -------------------------- ------ -----------
----- ----- - -------------
----- -------- - ------------------ - ---
-- ---------- - ------------------- -
------------------
-------
-------------
-
------- --------- - --
---- ---------
--
-
------- ----------
---- ---------
-
-
--
-------
-
-
--------------------
-
--
----- - ----------- - - -------
------------------ - -- -- -
----- - --------- - - -------
-- ---------- -- ----------------------------- -
----- ------ - --------------------------- -----------
-- ------ -
----- - -------- - - -----
----- ----- - ----------------------- -------
----- -- ---- - -------------------------- ------ -----------
----- ----- - -------------
----- -------- - ------------------ - ---
-- --------------- --- ------------------- -
----- ------- - ----------------------- - ---
-- --------- -
----- ---- - ---------------------------- ---------
------------------------- -------------------- -------
-
-
-
-
--------------
--
------ -------
--然后添加 toolbar
----- ------------ - -- -- -
----- ------ - -----------
----- ----------- - -------------------- -
------ --- --
------------------- -- -----------------
---
----- ----- - --------- -- -------------
------ -
-----
------------------ --------------- --
------ -- -
--
---------------- --------------- --
------------- --------------- --
------------------- --------------- --
---------------- --------------- --
---
--
------
--
--最后，将 toolbar 添加到 Slate.js 编辑器中即可
----- ---------------- - -- -- -
----- ------- --------- - -----------------------
----- ------ - ---------- -- -------------------------------------- ----
----- ------------- - ------------------- -- -
------ -------------------- -
---- --------
------ ------------- ---------- ---
---- ------------
------ ---------------- ---------- ---
---- -------------
------ ----------------- ---------- ---
--------
------ --------------- ---------- ---
-
-- ----
------ -
------
---------------
-------------
-------------------- -- -------------------
-
------------- --
--------- ----------------------------- --
--------
--
--示例代码
下面是一份完整的示例代码，copy 到本地项目中即可运行：
------ ------ - --------- -------- ----------- - ---- --------
------ - ------------ - ---- --------
------ - ------ --------- ---------- -------- - ---- --------------
------ - ------- ----------- ----- - ---- --------
------ -
------
----------------
-------------------
--------------------
-------------
----------
- ---- ---------------------------------
----- ---------------- - -- -- -
----- ------- --------- - -----------------------
----- ------ - ---------- -- -------------------------------------- ----
----- ------------- - ------------------- -- -
------ -------------------- -
---- --------
------ ------------- ---------- ---
---- ------------
------ ---------------- ---------- ---
---- -------------
------ ----------------- ---------- ---
--------
------ --------------- ---------- ---
-
-- ----
------ -
------
---------------
-------------
-------------------- -- -------------------
-
------------- --
--------- ----------------------------- --
--------
--
--
----- ------------ - -
-
----- --------
--------- -
-
----- ------------
--------- -
-
----- -------------
--------- -- ----- -- ---
--
-
----- -------------
--------- -- ----- ------ -- ---
--
-
----- -------------
--------- -- ----- ------ -- ---
--
--
--
-
----- ------------
--------- -
-
----- -------------
--------- -- ----- ---- -- ---
--
-
----- -------------
--------- -- ----- --- ---
--
-
----- -------------
--------- -- ----- --- ---
--
--
--
-
----- ------------
--------- -
-
----- -------------
--------- -- ----- ---- -- ---
--
-
----- -------------
--------- -- ----- --- ---
--
-
----- -------------
--------- -- ----- --- ---
--
--
--
--
--
--
----- -------------- - ------- -- -
------ -- -------------------------------------------
--
----- ------------ - ------- -- -
------ -
-------
------ ----------------------------------------------
--------
--
--
----- --------------- - ------- -- -
------ --- --------------------------------------------
--
----- ---------------- - ------- -- -
----- - ----------- --------- ------- - - ------
------ -
---
---------------
-----------------------
-------- ----------- ---------------- - ------ - ------------- --
-
----------
-----
--
--
----- ---------- - -------- -- -
----- - ------ - - -------
------------- - --------- -- -
------ ------------ --- ------------ - ---- - ----------------
--
----- - --------------- ------------- - - -------
--------------------- - ------ -- -
----- - --------- - - -------
-- ---------- -- ----------------------------- -
----- ------ - --------------------------- -----------
-- ------ -
----- - --------- --------- - - -----
-- ---------- - -- -
------------------
-------
-------------
-
------- --------- - --
---- ---------
--
-
------- ----------
---- ---------
-
-
--
-------
-
-
---------------------
-
--
-------------------- - ------ -- -
----- - --------- - - -------
-- ---------- -- ----------------------------- -
----- ------ - --------------------------- -----------
-- ------ -
----- ----- - ----------------------- ------
-- ------- -
----- - --------- --------- - - -----
----- -- ---- - -------------------------- ------ ----------
----- ----- - -------------
----- -------- - ------------------ - ---
-- ---------- - ------------------- -
------------------
-------
-------------
-
------- --------- - --
---- ---------
--
-
------- ----------
---- ---------
-
-
--
-------
-
-
-
--------------------
-
--
----- - ----------- - - -------
------------------ - -- -- -
----- - --------- - - -------
-- ---------- -- ----------------------------- -
----- ------ - --------------------------- -----------
-- ------ -
----- - -------- - - -----
----- ----- - ----------------------- ------
----- -- ---- - -------------------------- ------ ----------
----- ----- - -------------
----- -------- - ------------------ - ---
-- --------------- --- ------------------- -
----- ------- - ----------------------- - ---
-- --------- -
----- ---- - ------------------- ---------
------------------------- -------------------- -------
-
-
-
-
--------------
--
------ -------
--
----- ----------- - -------- ------- - -- ---- - -- -- -
----- ----- - --------------------- ------
------------------------------ -------
--
----- ----------------- - -- ------ -- -- -
-------
-------------------- -- -
-----------------------
--------------------
--
-
------ -----
---------
--
----- --------------- - -- ------ -- -- -
-------
-------------------- -- -
-----------------------
----- ------ - ----------------------------
-- ------ -
----- ----- - ----------------------- -------
----- --------- - ---------
----- --------- - ---------------
-----------------------
-------
----------------------------- --------- - ---
-
--- ------------------- -------
-
--
-
--
-
--- ------
---------
--
----- ------------ - -- ------ -- -- -
-------
-------------------- -- -
-----------------------
----- ------ - ----------------------------
-- ------ -
----- ----- - ----------------------- -------
----- --------- - ---------
----- -------- - --------------
-----------------------
-------
-------------------------- -------- - ---
-
--- ------------------- -------
-
--
-
--
-
--- ---
---------
--
----- ------------------ - -- ------ -- -- -
-------
-------------------- -- -
-----------------------
----- ------ - ----------------------------
-- ------ -
----- ----- - ----------------------- -------
----- --------- - ---------------
-- ---------------------------------- --- -- -
------------------------------ - --- ------------------- ------ ---
- ---- -
----- --------- - ---------
-----------------------
-------
----------------------- -----------
-
--- ------------------- -------
-
--
-
-
--
-
------ ------
---------
--
----- --------------- - -- ------ -- -- -
-------
-------------------- -- -
-----------------------
----- ------ - ----------------------------
-- ------ -
----- ----- - ----------------------- -------
----- -------- - --------------
-- ---------------------- --- -- -
------------------------------ - --- ------------------- ------ ---
- ---- -
----- --------- - ---------
-----------------------
-------
-------------------- ----------
-
--- ------------------- -------
-
--
-
-
--
-
------ ---
---------
--
----- ------------ - -- -- -
----- ------ - -----------
----- ----------- - -------------------- -
------ --- --
------------------- -- -----------------
---
----- ----- - --------- -- -------------
------ -
-----
------------------ --------------- --
------ -- -
--
---------------- --------------- --
------------- --------------- --
------------------- --------------- --
---------------- --------------- --
---
--
------
--
--来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005739781e8991b448e9893