跳转到内容
EasyX

Table Plus

@easyx/tiptap-table-plus 是独立的 Tiptap 表格增强套件：在原生 Table 之上补充单元格样式、选区覆盖层、节点背景色与上下文菜单，不依赖任何 UI 框架。

表格增强演示 右键菜单、选区手柄与 70 色色板
API 参考 配置项、命令、翻译字段与类型

特性

Section titled “特性”

选区覆盖层

表格选区常显边框与加行 / 加列手柄，操作入口随选区出现。

单元格样式

文字颜色与水平 / 垂直对齐，均为可序列化属性。

上下文菜单

右键菜单内置行列操作、合并拆分、表头切换与颜色，可增删改。

70 色色板

10 色相 × 7 级明度，方向键可导航，作用于文字与背景。

节点背景色

任意块级节点可设背景色，不限于表格单元格。

国际化

内置 zh-CN / en-US，支持局部翻译覆盖。

安装

Section titled “安装”
Terminal window
pnpm add @easyx/tiptap-table-plus

样式以独立 CSS 文件随包提供，并由包入口自动引入，通常无需额外处理。若宿主打包器忽略依赖内的 CSS 导入，再手动引入：

import '@easyx/tiptap-table-plus/styles/table.css';

快速上手

Section titled “快速上手”

TablePlus 需配合 @tiptap/extension-table 使用，推荐开启 resizable 支持列宽拖拽：

import { Editor } from '@tiptap/core';
import { TableKit } from '@tiptap/extension-table';
import { TablePlus } from '@easyx/tiptap-table-plus';


const editor = new Editor({
  extensions: [
    TableKit.configure({ table: { resizable: true } }),
    TablePlus.configure({ locale: 'zh-CN', theme: 'light' }),
  ],
});

配置

Section titled “配置”
TablePlus.configure({
  theme: 'dark',                       // 'light' | 'dark'
  locale: 'en-US',                     // 'zh-CN' | 'en-US'
  translations: { deleteRow: 'Remove Row' },
  contextMenu: (items) => items.filter(
    (item) => !('variant' in item && item.variant === 'destructive'),
  ),
});
  • theme：影响选区覆盖层与上下文菜单配色，可用 setTablePlusTheme 命令动态切换
  • locale / translations：内置语言包切换与局部覆盖
  • contextMenu：接收默认菜单项列表，返回修改后的列表

完整配置项、命令与类型见 API 参考。

主题

Section titled “主题”

样式通过 CSS 自定义属性控制，可在外部覆盖：

.my-editor {
  --easyx-tiptap-table-plus-accent: #2563eb;
  --easyx-tiptap-table-plus-border: #e5e7eb;
}