注:这个包件与[ProseMirror/prosemiror-tables]上的包件几乎完全相同 (单位:千美元)https://github.com/ProseMiror/prosemiror-tables (中文(简体) )),但该建筑已经 调整为使用 Bail 而不是 bulle 的转接器,现在应该是 ES6 兼容的.

ProseMiror 表格模块

本模块定义了用于支持表格的系统扩展 行/ colspan 支持, 单元格选择自定义选择类 在这样的表格中,用于管理和执行此类选择的插件 这些表格的变数,以及一些可与之合作的命令 图表.

顶级目录包含 demo.js 财务报告和审定财务报表 index.html,哪个 可用 yarn build_demo 以演示 可使用模块.

文档

模块主文件输出出所有您需要与之合作的东西. 你可能想做的第一件事就是 创建一个桌子 计划 就这样 tableNodes 用于:

• tableNodes(options: Object) → Object
  此函数创建一组 节点 规格 页:1 table, (中文(简体) ), table_row,以及 table_cell 此操作所用的节点类型 模块。 然后,当 创建一个计划.

  • options: Object
    理解如下:

    • tableGroup: ?string
      组名( 比如 "block"添加到表格中 节点类型.

    • cellContent: string
      表格单元格的内容表达式.

    • cellAttributes: ?Object
      要添加到单元格中的额外属性 。 地图属性名称为 具有下列属性的对象:

      • default: any
        属性的默认值 .

      • getFromDOM: ?fn(dom.Node) → any
        从 DOM 节点读取属性值的函数 .

      • setDOMAttr: ?fn(value: any, attrs: Object)
        将属性值添加到属性中的函数 用于制造细胞DOM的物体.

• tableEditing() → Plugin
  创建一个 插件 ,当添加到编辑器中时,允许单元格选择,处理 基于单元格的复制/粘贴,并确保表格保持良好的结构(每个表格) 行的宽度相同,单元格不相重叠.

  您可能应该把这个插件放在您的数组的末尾 插件,因为它处理表格中的鼠标和箭头关键事件 相当宽泛,以及其它插件,例如空白光标或 列宽拖曳插件,可能想要先翻转到 进行更具体的行为.

类 单元格选择扩展选择

A 类 Selection 子类,代表横跨表格部分内容的单元格选择. 启用插件后, 用户会创建这些插件 选择跨单元格,然后通过给选定的单元格一个 selectedCell CSS课.

• new CellSelection($anchorCell: ResolvedPos, $headCell: ?ResolvedPos = $anchorCell)
  表格选择由其锚和头单元格确定。 这个 给予该建筑师的职位应标明 在此之前 两个 同一表格中的单元格。 他们可能是一样的,选择一个 电话.

• $anchorCell: ResolvedPos
  确定的立场 在前面 锁定单元格(一个) 这在扩展选择时不会移动).

• $headCell: ResolvedPos
  指向头部牢房(即 在扩展选择时移动).

• content() → Slice
  返回含有所选表格行的长方形片段 细胞.

• isColSelection() → bool
  如果选择从头到尾都是真实的 桌子底边.

• isRowSelection() → bool
  如果选择从左到右 在桌子右边.

• static colSelection($anchorCell: ResolvedPos, $headCell: ?ResolvedPos = $anchorCell) → CellSelection
  返回覆盖给定锚的最小列选择 和头部细胞.

• static rowSelection($anchorCell: ResolvedPos, $headCell: ?ResolvedPos = $anchorCell) → CellSelection
  返回覆盖给定锚的最小行选择 和头部细胞.

• static create(doc: Node, anchorCell: number, headCell: ?number = anchorCell) → CellSelection

图标

以下命令可用于制作表格编辑功能 可供用户使用.

• addColumnBefore(state: EditorState, dispatch: ?fn(tr: Transaction)) → bool
  命令在选择的列前添加一列.

• addColumnAfter(state: EditorState, dispatch: ?fn(tr: Transaction)) → bool
  命令在选择的列后添加一列.

• deleteColumn(state: EditorState, dispatch: ?fn(tr: Transaction)) → bool
  从表格中删除所选列的命令函数.

• addRowBefore(state: EditorState, dispatch: ?fn(tr: Transaction)) → bool
  选择前添加一个表格行.

• addRowAfter(state: EditorState, dispatch: ?fn(tr: Transaction)) → bool
  选择后添加一行表格.

• deleteRow(state: EditorState, dispatch: ?fn(tr: Transaction)) → bool
  从表格中删除所选行.

• mergeCells(state: EditorState, dispatch: ?fn(tr: Transaction)) → bool
  将选定的单元格合并为一个单元格。 仅在 选定单元格的大纲构成矩形.

• splitCell(state: EditorState, dispatch: ?fn(tr: Transaction)) → bool
  拆分一个选定的单元格,其行板或相框大于一个, 进入较小的细胞。 对新单元格使用第一个单元格类型.

• splitCellWithType(getType: fn({row: number, col: number, node: Node}) → NodeType) → fn(EditorState, dispatch: ?fn(tr: Transaction)) → bool
  拆分一个选定的单元格,其行板或相框大于一个, 转换为小单元格,单元格类型(th, td)由 getType 函数返回.

• setCellAttr(name: string, value: any) → fn(EditorState, dispatch: ?fn(tr: Transaction)) → bool
  返回将给定属性设定为给定值的命令, ,并且只有在当前选中的单元格不可用时才可用 已经将属性设定为该值.

• toggleHeaderRow(EditorState, dispatch: ?fn(tr: Transaction)) → bool
  切换选中行是否包含页眉单元格.

• toggleHeaderColumn(EditorState, dispatch: ?fn(tr: Transaction)) → bool
  切换选中的列是否包含标题单元格.

• toggleHeaderCell(EditorState, dispatch: ?fn(tr: Transaction)) → bool
  切换选定单元格是否为标题单元格.

• toggleHeader(type: string, options: ?{useDeprecatedLogic: bool}) → fn(EditorState, dispatch: ?fn(tr: Transaction)) → bool
  在行/列标题和普通单元格之间切换(仅适用于一行/列). 对于堕落的行为通过 useDeprecatedLogic 以真实的选项.

• goToNextCell(direction: number) → fn(EditorState, dispatch: ?fn(tr: Transaction)) → bool
  返回用于选择下一个(方向=1)或上一个的命令 (方向=-1)表格中的单元格.

• deleteTable(state: EditorState, dispatch: ?fn(tr: Transaction)) → bool
  删除选定的表格.

公用事业

• fixTables(state: EditorState, oldState: ?EditorState) → ?Transaction
  检查给定状态文档中的所有表格并返回 a 交易,必要时可以修正它们。 若为 oldState 曾经 前提是,这被认为是 保持之前,已知良好状态, 用于避免重新扫描 文档.

类表映射

一张表格图描述了某一表格的构造。 为了避免 重新计算它们时,它们会被每个表格节点缓存. 改为: 在地图中保存的位置相对于 开始表格,而不是开始文档.

• width: number
  表格的宽度

• height: number
  桌子的身高 高点

• map: [number]
  宽度 * 高度阵列, 起始位置为 每个槽中覆盖表格该部分的单元格

• findCell(pos: number) → Rect
  在给定位置查找单元格的尺寸 .

• colCount(pos: number) → number
  在指定位置找到单元格左侧 .

• nextCell(pos: number, axis: string, dir: number) → ?number
  从单元格开始查找给定方向的下一个单元格 时间 pos如果有的话.

• rectBetween(a: number, b: number) → Rect
  让矩形横跨两个给定的细胞.

• cellsInRect(rect: Rect) → [number]
  返回所有左上角单元格的位置 给定矩形.

• positionAt(row: number, col: number, table: Node) → number
  返回单元格在给定行和列的位置 如果一个单元格在那里启动,则启动或将启动.

• static get(table: Node) → TableMap
  查找给定的表格节点的表格地图.