问题标签 [tiptap]

如何将相对简单的标签转换为 Javascript 或渲染更复杂的 html？这是我尝试完成的示例：

在这个 Vue.js SPA 中，有一个富文本编辑器（我正在尝试使用 Tiptap），使用户能够编写小块富文本。编辑器有一个额外的按钮，可以标记一段文本并对其应用标签以将其标记为国家（类似于标记粗体，只是将其标记为国家）。像这样的东西：

我可以完全控制该标签的外观，但我希望它保持简短且与前端无关（所以那里没有 javascript）。

必需是允许此跨度 onclick/onmouseover 到 av-overlay或 a v-tooltip。因此，通过激活它，会弹出一个覆盖/工具提示，其中包含有关丹麦的更多信息。我也可以想象我会将它路由到丹麦的页面。所有这些都取决于内容的显示位置，因此您会看到它必须是不可知的。

如果我能够调用 javascript 函数，我将能够打开 av-overlay或调用this.$router.push. 我认为这也可能通过激活器允许 v-tooltips。

我已经想到了这些方法，但我可能离这里很远。

• 能够以某种方式调用javascript。
• 数据将使用 Tiptap 编辑器呈现到屏幕上。也许那里有可能性？
• ...？

更新; 我想我可能已经找到了解决办法。这有多好/坏？：

单击表格上的一行时会显示“富文本”。选定的行存储在selected. 这是我们渲染它的地方：

description_html包含问题中提到的跨度。handleClick 函数检查是否单击了具有 data-country-id 的元素，如果是，则设置一个全局变量并打开一个覆盖。

类似的方法可能适用于鼠标悬停。-- 我想知道我是否必须在某个时候删除 eventListener？灵感来自：Vue：将点击事件绑定到动态插入的内容

我尝试使用tiptap（prosemirror）制作一个编辑器，默认情况下所有内容都不可编辑。只有我的自定义节点（例如<var-input>）应该是可编辑的。

例如：

<var-input ...>只有标签之间的内容</var-input>应该是可编辑的。

我怎样才能做到这一点？

我使用的是tiptap，它是在prosemirror for vue.js 之上构建的。

运行命令（{ href: url }）后，我想取消选择当前选择并将插入符号位置设置为所选节点的末尾。注意：我正在使用 TipTap

创建新实例时无法设置方法editorView内部的值。因为调用嵌套了两个方法，我不确定如何访问 Vue 实例来正确设置.onInitEditoreditorView

我一直在尝试在我的一个项目中实现 TipTap。我安装了tiptap和tiptap扩展：

我只是使用了 Github 页面上的示例，即https://github.com/ueberdosis/tiptap#extensions

出于某种原因，这给了我以下错误：

知道如何解决这个问题吗？也许我错过了什么？

我正在尝试将嵌套的 Vuex 状态对象绑定到tiptap 的编辑器内容组件的编辑器属性。

状态如下所示：

存储在 nuxt 框架中。

嵌套的 vuex 对象位于 vuex 存储中的 editors 数组中，如下图所示。

如果我这样做，那么我会得到这个 vue 的错误日志。当我通过 vue 数据属性执行此操作时，它就像一个魅力，但升级到 vuex 对我来说非常有问题，我不知道为什么。

我有一个带有tiptap 文本编辑器的组件。我使用带有 setter 的计算属性将数据绑定到编辑器。

当我快速输入大量文本时，我的组件会冻结。我使用计算属性是因为我必须获取一些当前文本，然后才能更改它。有人知道这种情况的最佳做法吗？我该如何解决这个问题？

我正在尝试使用tiptap。实际上它有效，但我想做的是从editor组件外部访问“isActive”插槽，我不知道该怎么做。

这是一个代码框示例：https ://codesandbox.io/s/v07xnxo807?file=/src/App.vue

您会看到 Editor 组件是从 App.vue 调用的。编辑器组件中的按钮根据“isActive”插槽功能激活。我想要访问此插槽以获取例如isActive.bold()来自 App.vue 的值，以便更新您可以在 Vuetify 上找到的“多个按钮”的模型：https ://vuetifyjs.com/fr- FR/组件/按钮组/

例如，这是我可以拥有的：

并且toggle_multiple 将根据不同的“isActive”函数值来计算。

我已经尝试过：

但我收到此错误：error 'editor' is not defined

我愿意接受任何建议。提前致谢。

我在codesandbox.io 中有两个分叉的沙箱。虽然这两个沙箱从不同的地方分叉出来，但我已经修改它们以使用相同的包和内容。

我想知道为什么这两个codeandbox的输出结果不同。

第一个分叉的沙箱 URL。分叉的代码框 001

第二个分叉的沙箱网址。分叉的代码框 002

更新

---

我没有注意到内部资源中有一个index.css（如果不小心很难注意到），这导致了差异。谢谢@User28 的提醒。

非常感谢您的帮助，非常感谢。

我想在 php 表单中使用 TipTap 编辑器作为 textarea 字段。我创建了一个 Vue 组件并将其传递给刀片视图。

刀片视图：

我的 Vue 组件：

我怎样才能做到这一点？提前谢谢你。

这是 console.Log 输出：

一些用于发布的 lorem ipsum 文本