如何配置ProseMirror Schema使自定义<tmp>标签在Kendo Editor表格中正常工作？

我正在使用基于ProseMirror库的Kendo Editor开发模板编辑器，需求是在表格内处理自定义<tmp>标签——该标签作为可被列表数据替换枚举的模板区域，示例HTML结构如下：

<table>
    <tmp>
        <tr><td>cell 1</td></tr>
    </tmp>
    <tr><td>cell 2</td></tr>
</table>

目前编辑器已能识别<tmp>标签，但解析时会将<tmp>内部的内容移出原表格，生成新的表格，最终输出结果如下：

<table><tbody><tmp><tr></tr> </tmp></tbody></table>
<table><tbody><tr><td><p>cell 1</p>
</td>
</tr>
<tr><td><p>cell 2</p>
</td>
</tr>
</tbody></table>

我已对Schema进行了如下修改：

import { schema, Schema } from "@progress/kendo-angular-editor";

let tableNode = { ...schema.spec.nodes.get("table") };
tableNode.content = "table_row+ | tmp+";

let nodes = schema.spec.nodes.addToEnd("tmp", {
  content: "table_row",
  tableRole: "row",
  parseDOM: [{
    tag: "tmp"
  }],
  toDOM: node => ["tmp", 0]
}).update("table", tableNode);

const marks = schema.spec.marks;

// Create the new schema.
export const mySchema: Schema = new Schema({ nodes, marks });

请问该需求在Kendo/ProseMirror中是否可行？还是需要更换编辑器？

这个需求完全可以在Kendo/ProseMirror中实现，无需更换编辑器，问题出在Schema的规则定义上，调整后即可解决：

核心问题分析 #

当前table节点的content规则写为"table_row+ | tmp+"，这里的|是ProseMirror的选择运算符，表示表格内容只能是全部为table_row或全部为tmp，不允许两者混合存在，这就是解析时内容被拆分到两个表格的原因。

修改步骤 #

1. 修正表格节点的内容规则
   将tableNode.content改为"(table_row | tmp)+"，表示表格内容可以是table_row和tmp的任意混合组合：

tableNode.content = "(table_row | tmp)+";

2. 调整tmp节点的内容定义
   允许tmp节点包含多行（如果业务需要的话），将content改为"table_row+"，确保它能作为表格行的容器：

let nodes = schema.spec.nodes.addToEnd("tmp", {
  content: "table_row+",
  tableRole: "row",
  parseDOM: [{ tag: "tmp" }],
  toDOM: node => ["tmp", 0]
}).update("table", tableNode);

修改后的完整Schema示例 #

import { schema, Schema } from "@progress/kendo-angular-editor";

let tableNode = { ...schema.spec.nodes.get("table") };
// 允许table_row和tmp混合出现在表格中
tableNode.content = "(table_row | tmp)+";

let nodes = schema.spec.nodes.addToEnd("tmp", {
  content: "table_row+", // 支持tmp内包含多行
  tableRole: "row",
  parseDOM: [{ tag: "tmp" }],
  toDOM: node => ["tmp", 0]
}).update("table", tableNode);

const marks = schema.spec.marks;

export const mySchema: Schema = new Schema({ nodes, marks });

额外说明 #

如果调整后仍有解析问题，可检查Kendo Editor基于的ProseMirror表格插件是否需要额外配置，确保自定义tmp节点能被表格模块识别为合法的内部节点。必要时可在parseDOM中添加上下文匹配规则，确保<tmp>仅在表格内被正确解析。

内容的提问来源于stack exchange，提问作者ZrSiO4