前言
在 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：
npm install slate slate-react @harveyprince/slate-edit-table
使用
初始化 Slate.js 编辑器
首先，我们需要初始化 Slate.js 编辑器
-- -------------------- ---- ------- ------ ------ - --------- -------- ----------- - ---- -------- ------ - ------------ - ---- -------- ------ - ------ --------- --------- - ---- -------------- ----- ---------------- - -- -- - ----- ------- --------- - ----------------------- ----- ------ - ---------- -- -------------------------------------- ---- ----- ------------- - ------------------- -- - ------ -------------------- - ---- -------- ------ ------------- ---------- --- ---- ------------ ------ ---------------- ---------- --- ---- ------------- ------ ----------------- ---------- --- -------- ------ --------------- ---------- --- - -- ---- ------ - ------ --------------- ------------- -------------------- -- ------------------- - --------- ----------------------------- -- -------- -- --展开代码
创建表格
要在 Slate.js 编辑器中创建表格，首先我们要定义一个插入表格的函数
import { Transforms } from "slate"; import { Table, TableRow, TableCell } from "@harveyprince/slate-edit-table"; const insertTable = (editor, columns = 2, rows = 2) => { const table = Table.create(columns, rows); Transforms.insertNodes(editor, table); };
然后我们将这个函数通过一个按钮触发
-- -------------------- ---- ------- ----- ----------------- - -- ------ -- -- - ------- -------------------- -- - ----------------------- -------------------- -- - ------ ----- --------- --展开代码
编辑表格
@harveyprince/slate-edit-table 官方提供了一个 toolbar，在项目中添加该 toolbar 就可以对表格进行编辑。具体步骤如下：
首先定义一个 withTables 函数
-- -------------------- ---- ------- ------ - ------- ----------- ----- - ---- -------- ------ - ----------- - ---- -------------- ------ - ------ ---------------- ------------------- -------------------- - ---- --------------------------------- ----- ---------- - -------- -- - ----- - --------------- ------------- - - ------- --------------------- - ------ -- - ----- - --------- - - ------- -- ---------- -- ----------------------------- - ----- ------ - --------------------------- ----------- -- ------ - ----- - --------- --------- - - ----- -- ---------- - -- - ------------------ ------- ------------- - ------- --------- - -- ---- --------- -- - ------- ---------- ---- --------- - - -- ------- - - --------------------- - -- -------------------- - ------ -- - ----- - --------- - - ------- -- ---------- -- ----------------------------- - ----- ------ - --------------------------- ----------- -- ------ - ----- ----- - ----------------------- ------- ----- - --------- --------- - - ----- ----- -- ---- - -------------------------- ------ ----------- ----- ----- - ------------- ----- -------- - ------------------ - --- -- ---------- - ------------------- - ------------------ ------- ------------- - ------- --------- - -- ---- --------- -- - ------- ---------- ---- --------- - - -- ------- - - -------------------- - -- ----- - ----------- - - ------- ------------------ - -- -- - ----- - --------- - - ------- -- ---------- -- ----------------------------- - ----- ------ - --------------------------- ----------- -- ------ - ----- - -------- - - ----- ----- ----- - ----------------------- ------- ----- -- ---- - -------------------------- ------ ----------- ----- ----- - ------------- ----- -------- - ------------------ - --- -- --------------- --- ------------------- - ----- ------- - ----------------------- - --- -- --------- - ----- ---- - ---------------------------- --------- ------------------------- -------------------- ------- - - - - -------------- -- ------ ------- --展开代码
然后添加 toolbar
-- -------------------- ---- ------- ----- ------------ - -- -- - ----- ------ - ----------- ----- ----------- - -------------------- - ------ --- -- ------------------- -- ----------------- --- ----- ----- - --------- -- ------------- ------ - ----- ------------------ --------------- -- ------ -- - -- ---------------- --------------- -- ------------- --------------- -- ------------------- --------------- -- ---------------- --------------- -- --- -- ------ -- --展开代码
最后，将 toolbar 添加到 Slate.js 编辑器中即可
-- -------------------- ---- ------- ----- ---------------- - -- -- - ----- ------- --------- - ----------------------- ----- ------ - ---------- -- -------------------------------------- ---- ----- ------------- - ------------------- -- - ------ -------------------- - ---- -------- ------ ------------- ---------- --- ---- ------------ ------ ---------------- ---------- --- ---- ------------- ------ ----------------- ---------- --- -------- ------ --------------- ---------- --- - -- ---- ------ - ------ --------------- ------------- -------------------- -- ------------------- - ------------- -- --------- ----------------------------- -- -------- -- --展开代码
示例代码
下面是一份完整的示例代码，copy 到本地项目中即可运行：
-- -------------------- ---- ------- ------ ------ - --------- -------- ----------- - ---- -------- ------ - ------------ - ---- -------- ------ - ------ --------- ---------- -------- - ---- -------------- ------ - ------- ----------- ----- - ---- -------- ------ - ------ ---------------- ------------------- -------------------- ------------- ---------- - ---- --------------------------------- ----- ---------------- - -- -- - ----- ------- --------- - ----------------------- ----- ------ - ---------- -- -------------------------------------- ---- ----- ------------- - ------------------- -- - ------ -------------------- - ---- -------- ------ ------------- ---------- --- ---- ------------ ------ ---------------- ---------- --- ---- ------------- ------ ----------------- ---------- --- -------- ------ --------------- ---------- --- - -- ---- ------ - ------ --------------- ------------- -------------------- -- ------------------- - ------------- -- --------- ----------------------------- -- -------- -- -- ----- ------------ - - - ----- -------- --------- - - ----- ------------ --------- - - ----- ------------- --------- -- ----- -- --- -- - ----- ------------- --------- -- ----- ------ -- --- -- - ----- ------------- --------- -- ----- ------ -- --- -- -- -- - ----- ------------ --------- - - ----- ------------- --------- -- ----- ---- -- --- -- - ----- ------------- --------- -- ----- --- --- -- - ----- ------------- --------- -- ----- --- --- -- -- -- - ----- ------------ --------- - - ----- ------------- --------- -- ----- ---- -- --- -- - ----- ------------- --------- -- ----- --- --- -- - ----- ------------- --------- -- ----- --- --- -- -- -- -- -- -- ----- -------------- - ------- -- - ------ -- ------------------------------------------- -- ----- ------------ - ------- -- - ------ - ------- ------ ---------------------------------------------- -------- -- -- ----- --------------- - ------- -- - ------ --- -------------------------------------------- -- ----- ---------------- - ------- -- - ----- - ----------- --------- ------- - - ------ ------ - --- --------------- ----------------------- -------- ----------- ---------------- - ------ - ------------- -- - ---------- ----- -- -- ----- ---------- - -------- -- - ----- - ------ - - ------- ------------- - --------- -- - ------ ------------ --- ------------ - ---- - ---------------- -- ----- - --------------- ------------- - - ------- --------------------- - ------ -- - ----- - --------- - - ------- -- ---------- -- ----------------------------- - ----- ------ - --------------------------- ----------- -- ------ - ----- - --------- --------- - - ----- -- ---------- - -- - ------------------ ------- ------------- - ------- --------- - -- ---- --------- -- - ------- ---------- ---- --------- - - -- ------- - - --------------------- - -- -------------------- - ------ -- - ----- - --------- - - ------- -- ---------- -- ----------------------------- - ----- ------ - --------------------------- ----------- -- ------ - ----- ----- - ----------------------- ------ -- ------- - ----- - --------- --------- - - ----- ----- -- ---- - -------------------------- ------ ---------- ----- ----- - ------------- ----- -------- - ------------------ - --- -- ---------- - ------------------- - ------------------ ------- ------------- - ------- --------- - -- ---- --------- -- - ------- ---------- ---- --------- - - -- ------- - - - -------------------- - -- ----- - ----------- - - ------- ------------------ - -- -- - ----- - --------- - - ------- -- ---------- -- ----------------------------- - ----- ------ - --------------------------- ----------- -- ------ - ----- - -------- - - ----- ----- ----- - ----------------------- ------ ----- -- ---- - -------------------------- ------ ---------- ----- ----- - ------------- ----- -------- - ------------------ - --- -- --------------- --- ------------------- - ----- ------- - ----------------------- - --- -- --------- - ----- ---- - ------------------- --------- ------------------------- -------------------- ------- - - - - -------------- -- ------ ------- -- ----- ----------- - -------- ------- - -- ---- - -- -- - ----- ----- - --------------------- ------ ------------------------------ ------- -- ----- ----------------- - -- ------ -- -- - ------- -------------------- -- - ----------------------- -------------------- -- - ------ ----- --------- -- ----- --------------- - -- ------ -- -- - ------- -------------------- -- - ----------------------- ----- ------ - ---------------------------- -- ------ - ----- ----- - ----------------------- ------- ----- --------- - --------- ----- --------- - --------------- ----------------------- ------- ----------------------------- --------- - --- - --- ------------------- ------- - -- - -- - --- ------ --------- -- ----- ------------ - -- ------ -- -- - ------- -------------------- -- - ----------------------- ----- ------ - ---------------------------- -- ------ - ----- ----- - ----------------------- ------- ----- --------- - --------- ----- -------- - -------------- ----------------------- ------- -------------------------- -------- - --- - --- ------------------- ------- - -- - -- - --- --- --------- -- ----- ------------------ - -- ------ -- -- - ------- -------------------- -- - ----------------------- ----- ------ - ---------------------------- -- ------ - ----- ----- - ----------------------- ------- ----- --------- - --------------- -- ---------------------------------- --- -- - ------------------------------ - --- ------------------- ------ --- - ---- - ----- --------- - --------- ----------------------- ------- ----------------------- ----------- - --- ------------------- ------- - -- - - -- - ------ ------ --------- -- ----- --------------- - -- ------ -- -- - ------- -------------------- -- - ----------------------- ----- ------ - ---------------------------- -- ------ - ----- ----- - ----------------------- ------- ----- -------- - -------------- -- ---------------------- --- -- - ------------------------------ - --- ------------------- ------ --- - ---- - ----- --------- - --------- ----------------------- ------- -------------------- ---------- - --- ------------------- ------- - -- - - -- - ------ --- --------- -- ----- ------------ - -- -- - ----- ------ - ----------- ----- ----------- - -------------------- - ------ --- -- ------------------- -- ----------------- --- ----- ----- - --------- -- ------------- ------ - ----- ------------------ --------------- -- ------ -- - -- ---------------- --------------- -- ------------- --------------- -- ------------------- --------------- -- ---------------- --------------- -- --- -- ------ -- --展开代码
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005739781e8991b448e9893
