简单的tiptap扩展或prosemirror插件

Question

我想使用与prosemirror编辑器一起工作的vuejs的tiptap编辑器。

我读过很多关于tiptap的文章，但文档并不是最好的，prosemirror本身对我来说也非常复杂。我希望你能帮助我。

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

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

Answer 1

tiptap文档并不是那么完整，所以你可以只看一下扩展的源代码。例如：https://github.com/ueberdosis/tiptap/tree/main/packages

标记很简单。您需要先使用parseDOM定义模式，然后使用toDOM定义模式。prosemirror文档将描述一切。它们是密集的，但https://prosemirror.net/docs/guide/很好

编辑器与控件是分开的。看一下所有的tiptap示例来调用您的插件。https://tiptap.dev/