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

标签 vue.js vuejs2 prose-mirror tiptap

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

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

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

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

最佳答案

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

关于vue.js - 简单的tiptap扩展或prosemirror插件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60524936/

相关文章:

vue.js - 如何制作可点击的带有悬停效果的q卡?

javascript - 相反,根据 prop 的值使用数据或计算属性。 Prop 正在变异 : "percentage"

javascript - 找不到Vuejs框架的元素

vuejs2 - nuxtjs 中的 vuex 模块模式

javascript - 获取 p-tag 中的文本并存储在变量中

javascript - 如何在 ProseMirror 中动态地使节点的子内容不可编辑?

javascript - Vue警告: Unknown custom element: <education-item> - did you register the component correctly?

javascript - 如何使用 Vue.js 将事件类添加到选项卡动态创建的导航中?

reactjs - 尝试扩展丰富的 Markdown 编辑器