问题标签 [prose-mirror]

我需要在我目前正在开发的 Angular 应用程序中使用 ProseMirror-Markdown 文本编辑器来支持表格。我有点卡住了。我决定使用 prosemirror-markdown 及其 MarkdownSerializer，因为项目中的现有功能现在已与 ProseMirror-Markdown 结合。

不幸的是，我遇到了与 TipTap GitHub 问题的贡献者相同的问题，其中涉及 prosemirror-markdown 和 GFM 表

没有官方表格支持 使用 prosemirror-markdown 的一个缺点是不支持（也不会支持）表格。我可以自己写那部分，但这意味着我们必须放弃一些表的高级功能，比如多行、嵌套表、在表中使用列表等。也许我们应该提供一个支持降价的 Table 节点和一个不支持降价的 ExtendedTable ?

之后我尝试实现一个 parseMarkdown() 函数，这要复杂得多。prosemirror-markdown 中有一个 MarkdownParser，它在后台使用 markdown-it。这很好，但意味着我们受到该解析器的限制。我一直认为有降价解析器有一个非常简单的 api 用于扩展，但我想我错了。:(

我正在使用 MarkdownIt 进行解析和序列化，以下是相关package.json条目：

我在解析器和降价表中添加了一些自定义标记，它们在高级别正确呈现：

但是，即使我已经清除了所有未解决的令牌错误，我也会在编辑器视图中得到一个部分呈现的表格：

这些是在初始化时添加到解析器的标记：

这些是在模式中定义的表节点：

任何人都有这方面的经验或可以提出替代方法吗？对此的任何帮助将不胜感激！

我有一个内容可编辑的元素，我正在尝试引入一些键命令来在其中移动光标（vim 键绑定）。我正在努力添加基本的上下运动（j＆k），这相当于按ArrowUp和ArrowDown。

我试过模拟箭头键事件，但还没有运气：

（其中 editor 是prosemiror编辑器）

我也尝试过仅使用可编辑的标准内容而没有运气：

有没有更好的方法来解决这个问题，或者有没有简单的方法来解决我上面的尝试？

我有 JSON 表示文本编辑器中的一些内容。这是一个示例：

这很好，因为我可以安全地将其转换为 html，但是它没有嵌套样式值，而是在marks子数组中表示此样式。如果存储已经嵌套的数据相对于它的自然层次结构，我更喜欢什么。

所以而不是：

我想要更准确地表示生成的 HTML 的东西：

我已经尝试了各种解析 json 并将其存储的方法，如下所示，但我认为我缺少关于 javascript 如何处理对象的一些基本知识，因为没有进行更改。

我已经marks对 json 中的每个数组进行了以下函数的各种迭代。

一些额外的背景信息，这是tiptap所见即所得编辑器生成的json，它是基于prosemirror的。我无法使用正常的 html 导出，因为我正在对数据进行特殊处理。任何帮助将不胜感激。

编辑：Dacre Denny 想出了一个答案，使用reduceRight()它回答了问题的第一部分。但是，下面的函数仍然返回原始对象不变。

在此处输入图像描述

我想用tiptap扩展实现图像和可编辑标题

https://discuss.prosemirror.net/t/figure-and-editable-caption/462
ProseMirror有一个很好的例子，但是用tiptap很难实现吗？
如果可能的话，请告诉我你应该写什么代码。

我附上我在下面写的代码。
图片和标题已成功添加，但标题尚无法编辑。

想象一下，我们有 WISYWIG/Markdown 编辑器，可以在此处的官方示例中切换模式。

请注意，当您切换模式时，它不会保留您的插入符号/滚动/选择。如果我们要进一步改进它的用户体验，我们需要在切换模式时保持插入符号的位置。

问题是 WISYWIG 中的光标位置，比如：“foo b|ar ”是“5”，而在原始降价位置将是“foo **b|ar**” - “7”。

在切换模式时，这些位置如何前后投射？

如果我们解决位置投影问题，“滚动”和“选择”同步只是需要做一些微调。

在 ProseMirror 中，.toDOMschema 的方法通常返回一个嵌套数组，描述如何将节点渲染到 DOM，类似于“虚拟 dom”数据结构。该数据结构还可以包含 ProseMirror 所称的“洞”，由0. 这个洞是 ProseMirror 将插入节点内容的地方，例如文本或其他节点。

但.toDOM也可以返回一个字符串或一个 DOM 节点，它们只是按原样使用。

即使toDOM返回 DOM 节点也可以定义孔吗？我是否需要实现一个 custom DOMSerializer，它似乎负责获取.toDOM返回值并生成一个{dom, contentDom?}对象。如果是这样，我将如何使用它？

这里https://github.com/ProseMirror/prosemirror-state/blob/master/src/state.js#L122是 prosemirror js 代码行：

这个javascript代码中无限循环之前的“外部”是什么意思？

更新。

函数的完整代码：

我想使用与 prosemiror 编辑器一起使用的 vuejs 的tiptap 编辑器。

我已经阅读了很多关于tiptap 的信息，但文档并不是最好的，prosemiror 本身对我来说非常复杂。我希望你能帮助我。

我想在tiptap 编辑器中实现我自己的扩展。例如在菜单中我想按下一个按钮并在文本字段中插入一个 div。div 可以具有许多属性，例如<div class="rectangle_var" company="example company" var-id="5124">text example</div>并且应该看起来像一个矩形。矩形还应该有浅灰色，并且可以在示例中包含类似“文本示例”的文本。

这个扩展听起来很简单，但我不知道如何为tiptap 创建自己的扩展。你能帮助我吗？

我有一些呈现以下 HTML 的 js 代码

在浏览器中，它实际上显示字符#039;而不是将其转换'为有没有办法强制/阻止浏览器进行这种转换？

我正在研究使用Slate或ProseMirror构建一个编辑器，并在使用内联元素时在插入符号位置和选择区域周围看到 Chrome 的一些奇怪行为。问题 1 如下图第一张所示。当文本光标位置在“f”后面时，插入符号显示在图像顶部。问题 2 在第二张图片中 - 选择文本会显示一个与内联元素一样高的突出显示区域。有没有办法控制这种行为，而是在文本位置显示插入符号，只突出显示文本周围的空间（即使内联图像使行高变大）

我想从 Firefox 模仿这里的行为：

示例图像是使用此处的 ProseMirror 演示生成的：https ://prosemirror.net/examples/basic/

JSBin的最小示例（感谢@Kaiido）：

不确定这在其他操作系统上的表现如何，但我使用的是 macOS Catalina。