简单的tiptap扩展或prosemiror插件答案

【问题标题】：simple tiptap extension or prosemirror plugin简单的tiptap扩展或prosemiror插件
【发布时间】：2020-06-16 21:06:21
【问题描述】：

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

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

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

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

【问题讨论】：

标签： vue.js vuejs2 prose-mirror tiptap

【解决方案1】：

tiptap 文档并不完整，因此您只需查看扩展的源代码即可。例如：https://github.com/ueberdosis/tiptap/tree/main/packages

标记非常简单。您需要使用parseDOM 和toDOM 定义架构。 prosemiror 文档将描述所有内容。它们很密集但很好https://prosemirror.net/docs/guide/

编辑器与控件是分开的。查看所有提示您的插件的示例。 https://tiptap.dev/

【讨论】：