vue.js - 简单的tiptap扩展或prosemirror插件

Question

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

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

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

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

Answer 1

Tiptap 文档并不完整，因此您可以查看扩展的源代码。例如:https://github.com/ueberdosis/tiptap/tree/main/packages
标记很简单。您需要定义架构，使用 parseDOM然后 toDOM . prosemirror 文档将描述一切。它们密集但很好 https://prosemirror.net/docs/guide/
编辑器与控件是分开的。查看所有用于调用插件的tiptap 示例。 https://tiptap.dev/