Javascript ProseMirror标记表未按预期呈现
我需要在我目前正在开发的角度应用程序中使用ProseMirror Markdown文本编辑器来支持表格。我有点困了。我决定使用prosemirror markdown及其MarkdownSerializer,因为该项目中现有的功能现在已与prosemirror markdown结合Javascript ProseMirror标记表未按预期呈现,javascript,markdown,prose-mirror,Javascript,Markdown,Prose Mirror,我需要在我目前正在开发的角度应用程序中使用ProseMirror Markdown文本编辑器来支持表格。我有点困了。我决定使用prosemirror markdown及其MarkdownSerializer,因为该项目中现有的功能现在已与prosemirror markdown结合 // heading example get schema() { return { toMarkdown: (state, node) => { state.write(`${sta
// heading example
get schema() {
return {
toMarkdown: (state, node) => {
state.write(`${state.repeat('#', node.attrs.level)} `)
state.renderInline(node)
state.closeBlock(node)
},
}
}
不幸的是,我遇到了与TipTap的贡献者相同的问题
没有官方表格支持使用prosemirror markdown的一个缺点
表不受支持(将来也不会)。我可以写
但这意味着我们必须放弃一些先进的
用于多行、嵌套表等表的功能,使用
表内的列表等。也许我们应该提供一个表节点
有降价支持和没有降价支持的ExtendedTable
在那之后,我试图实现一个
parseMarkdown()函数,这要复杂得多。有
prosemirror markdown中使用markdown的markdown解析器
在引擎盖下。这很好,但意味着我们受到限制
解析器。我一直认为有降价分析器在那里有一个
扩展api非常简单,但我想我错了(
我正在使用MarkdownIt进行解析和序列化,下面是相关的package.json
条目:
{...,
"markdown-it": "^9.1.0",
"markdown-it-table": "^2.0.4",
"prosemirror-keymap": "^1.0.0",
"prosemirror-markdown": "^1.3.1",
"prosemirror-model": "^1.0.0",
"prosemirror-state": "^1.0.0",
"prosemirror-transform": "^1.0.0",
"prosemirror-view": "^1.0.10",
"prosemirror-commands": "^1.0.0",
"prosemirror-example-setup": "^1.0.0",
"prosemirror-menu": "^1.0.0",
"prosemirror-schema-basic": "^1.0.0",
...}
我向解析器和标记表中添加了一些自定义标记,该表在高级别上正确呈现:
但是,尽管我已清除了所有未解决的令牌错误,但在编辑器视图中仍会得到一个部分呈现的表:
以下是初始化时添加到解析器的标记:
+ table: {block: "table"},
+ thead: {block: "table_row"},
+ tr: {block: "table_row"},
+ td: {block: "table_cell"},
+ th: {block: "table_cell"},
+ tbody: {block: "tbody"},
以下是架构中定义的表节点:
// Helper for creating a schema that supports tables.
function getCellAttrs(dom, extraAttrs) {
let widthAttr = dom.getAttribute("data-colwidth")
let widths = widthAttr && /^\d+(,\d+)*$/.test(widthAttr) ? widthAttr.split(",").map(s => Number(s)) : null
let colspan = Number(dom.getAttribute("colspan") || 1)
let result = {
colspan,
rowspan: Number(dom.getAttribute("rowspan") || 1),
colwidth: widths && widths.length == colspan ? widths : null
}
for (let prop in extraAttrs) {
let getter = extraAttrs[prop].getFromDOM
let value = getter && getter(dom)
if (value != null) result[prop] = value
}
return result
}
function setCellAttrs(node, extraAttrs) {
let attrs = {}
if (node.attrs.colspan != 1) attrs.colspan = node.attrs.colspan
if (node.attrs.rowspan != 1) attrs.rowspan = node.attrs.rowspan
if (node.attrs.colwidth)
attrs["data-colwidth"] = node.attrs.colwidth.join(",")
for (let prop in extraAttrs) {
let setter = extraAttrs[prop].setDOMAttr
if (setter) setter(node.attrs[prop], attrs)
}
return attrs
}
export function tableNodes(options) {
let extraAttrs = options.cellAttributes || {}
let cellAttrs = {
colspan: {default: 1},
rowspan: {default: 1},
colwidth: {default: null}
}
for (let prop in extraAttrs)
cellAttrs[prop] = {default: extraAttrs[prop].default}
return {
table: {
content: "table_row+",
tableRole: "table",
isolating: true,
group: options.tableGroup,
parseDOM: [{tag: "table"}],
toDOM() { return ["table", ["tbody", 0]] }
},
table_row: {
content: "(table_cell | table_header)*",
tableRole: "row",
parseDOM: [{tag: "tr"}],
toDOM() { return ["tr", 0] }
},
cell: {
content: options.cellContent,
attrs: cellAttrs,
tableRole: "cell",
isolating: true,
parseDOM: [{tag: "td", getAttrs: dom => getCellAttrs(dom, extraAttrs)}],
toDOM(node) { return ["td", setCellAttrs(node, extraAttrs), 0] }
},
table_header: {
content: options.cellContent,
attrs: cellAttrs,
tableRole: "header_cell",
isolating: true,
parseDOM: [{tag: "th", getAttrs: dom => getCellAttrs(dom, extraAttrs)}],
toDOM(node) { return ["th", setCellAttrs(node, extraAttrs), 0] }
}
}
}
export function tableNodeTypes(schema) {
let result = schema.cached.tableNodeTypes
if (!result) {
result = schema.cached.tableNodeTypes = {}
for (let name in schema.nodes) {
let type = schema.nodes[name], role = type.spec.tableRole
if (role) result[role] = type
}
}
return result
}
任何人都有这方面的经验或可以想出一个替代方法?任何帮助将不胜感激