@ domternal/ extension- table( 扩展表)

可编辑表格 永远,在 prosemirror-tables。包括单元格合并/分割、列调整大小、页眉行和 列、单元格样式、选择和键盘导航。 内置表格 视图提供行/列控件和一个单元格工具栏.

文档 • 妇女 实例

安装

软件包宣布Node.js 22或后作工具.

pnpm add @domternal/core @domternal/pm @domternal/extension-table @domternal/theme

核心和 pm 是同龄人, 范围 >=1.8.0 <2.0.0。为所有人使用1.8.1版 安装了 DOMTERNAL 免费软件包。 示例使用表格的可选主题 布局和用户界面;您可以自行提供样式.

快开始

<div id="editor" class="dm-editor"></div>

import { Editor, StarterKit } from '@domternal/core';
import { Table } from '@domternal/extension-table';
import '@domternal/theme';

const editor = new Editor({
  element: document.getElementById('editor')!,
  extensions: [StarterKit, Table],
});

editor.commands.insertTable({ rows: 3, cols: 3, withHeaderRow: true });

Table 登记册 TableRow, (中文(简体) ), TableCell, (中文(简体) ), TableHeader 财务报告和审定财务报表 Gapcursor 自动。 您不需要单独添加这些内容 。 打电话 editor.destroy() 当删除编辑器时.

配置调整大小和用户界面

替换 Table 在带配置实例的扩展数组中:

Table.configure({
  resizeBehavior: 'neighbor',
  constrainToContainer: true,
  cellMinWidth: 25,
  defaultCellMinWidth: 100,
});

禁用内置视图不会禁用列反射插件 . 使用空格添加一列保留已有自定义宽度 在从附近各栏借款之前, 见 调整行为大小 财务报告和审定财务报表 集装箱限制。 。 。 .

与表格有关的工作

命令使用当前单元格或单元格选择 :

editor.commands.addRowAfter();
editor.commands.addColumnAfter();
editor.commands.setCellAttribute('background', '#fff3cd');
editor.commands.setCellAttribute('textAlign', 'center');

合并需要兼容的单元格选择。 返回图标 false 当 当前选择或表格不支持操作。 使用 editor.can() 当启用自己的控制。 见 命令引用 用于参数、单元格位置和修复助手.

标签移动到下一个单元格并可以添加一行; Shift+Tab 向后移动。 内部 列表和任务项目,列表缩进优先。 选择所有单元格和 按后空格键,否则删除表格.

可选的表格布局设置

免费 1. 6.0 添加选入 TableLayout添加到旁边 Table 以存储明确的行 高度、单元格粘贴/边框和分页偏好。 没有它,现有的 表格计划不变. 在存储这些属性之前, 启用它 .

import { Table, TableLayout } from '@domternal/extension-table';

const extensions = [StarterKit, Table, TableLayout];

editor.commands.setTableLayout({ breakBefore: 'page' });
editor.commands.setTableRowLayout({ height: 48, heightRule: 'atLeast', allowSplit: false });
editor.commands.setTableCellLayout({
  padding: { top: 8, right: 12, bottom: 8, left: 12 },
  borders: { bottom: { width: 1, style: 'solid', color: '#445566' } },
});

命令在当前表格、行或单元格上行事。 通过 null 清除 相应的设置。 他们参与编辑器交易并撤消 扩展名不添加设置面板. editor.can() 检查可用性.

JSON 仓库 tableLayout, (中文(简体) ), rowLayout 财务报告和审定财务报表 cellLayout。尺寸是 CSS 像素 : 行高为1–4,096,每侧铺有0–256个,边宽为0–16个. heightRule 需要一个高度。 接受边框 solid, (中文(简体) ), dashed, (中文(简体) ), dotted, (中文(简体) ), double 或者说 none 和明确六位数的六进制颜色。 HTML 解析也接受 绝对 px, (中文(简体) ), pt, (中文(简体) ), mm, (中文(简体) ), cm 财务报告和审定财务报表 in 维度;百分比, calc() 财务报告和审定财务报表 var() 未解决。 浏览器将行高作为最小值,即使 存储的单词首选项是 exact。浏览器可以覆盖请求的打印 换行以适应可用的页面.

仅读 getNodeTableLayout, (中文(简体) ), getNodeTableRowLayout 财务报告和审定财务报表 getNodeTableCellLayout 帮助者返回已验证的设置仅用于节点 选入计划.

单独的Pro 导出软件包支持这些设置中的一个文件子集, 一、导 言 导出指南。 。 。 . 该实施使用本地Word设置并设定了PDF近似值. 与 allowSplit: false,它的 PDF 输出只会在它之后将一行相接 符合新页面及其重复的标题和最终字体。 体积过大或 未可测量行仍可分出警告,保留其内容.

内容和粘贴

单元格粘贴保留了表格结构,并在需要时扩展目的地。 添加 粘贴清除 明确用于办公室的 HTML 正常化;它未列入表格.

HTML 和 JSON 装入绑定完成时间跨度为 1 到 1000 , 并报告未支持的 JSON 通过内容诊断。 严格的计划验证需要正数 安全整数。 共享文件可能仍然包含不支持的存储跨度; 在明确进行迁移修复之前,有些表格操作仍然无法进行 他们。 渲染不会默地重写共享内容. 见 间距验证 编辑 核心移徙指南 在迁移现有合作文件之前.

在远程间距变得不支持之前所做的单元格选择会回到 文本守护而不重建表格的映射或删除其单元格。 明确 fixTables 命令还拒绝仍然包含不支持的跨度的文档. 使这些跨度正常化可以恢复普通的表格命令和单元格选择.

列宽为 null 或最多为1,000个有限、非负数的数组 不超过 Number.MAX_SAFE_INTEGER零表示自动宽; 分数 CSS 宽度仍然支持 。 无效的 JSON 宽度变为 null 带有 unsupported-table-width 诊断。 HTML 解析无效的宽度,以及 使存储的无效宽度使用自动缩放而不重写共享 内容. normalizeContentAttributes({ codes: ['unsupported-table-width'] }) 在应用程序选择迁移时进行明确修复.

PasteCleanup应用自己的结构预算,拒绝超过1 000个周期; 与表的普通 HTML 解析不同,它覆盖了跨度。 单元格颜色 和对齐值也遵循了Core的风格政策.

更多文档

• 表格指南: schema,属性,单元格粘贴,造型和完整选项.
• 出口数字 : TableView, (中文(简体) ), createTable, (中文(简体) ), CellSelection, (中文(简体) ), TableMap 和相关的助手.
• 本地化数字 : tableMessages 和可选 @domternal/extension-table/locales/de 目录.

许可证

麻省理工学院适应 prosemir-tables 代码由软件包覆盖 第三方通知。 。 。 .