问题标签 [tiptap]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
2 回答
166 浏览

vue.js - JSON 内容显示 Tiptap-Vuetify 的空白窗口?

背景

我正在使用tiptap-vuetify来实现一个消息/聊天UI,用户可以在其中看到一个用于创建新消息的可编辑Tiptap 实例以及几个不可编辑的Tiptap 实例(一个用于用户正在查看的线程中的每条已发送消息)。

在此处输入图像描述

我有 JSON 格式的可编辑实例输出数据,我将其存储在我的数据库中的 JSONB 字段中。

问题

当我从数据库加载已发送消息的 JSON 时,只显示纯文本消息;如果我应用任何样式(粗体、斜体、列表等),什么都不会出现。

在此处输入图像描述

我用于不可编辑的 Tiptap 实例的代码是这样的:

这是上面“bold asdf”示例 的message对象(和)的屏幕截图:message.content在此处输入图像描述

0 投票
1 回答
273 浏览

javascript - Vue 3 和 TipTap Editor 在全局范围内传递

我在 VueJS 3 中工作,刚刚添加了 TipTap 编辑器。我只想在用户单击内容时显示编辑器菜单,触发焦点事件。然后在模糊菜单需要隐藏。所以我在菜单组件中添加了一个 ref="myMenu" 并使用 opFocus nad onBlur 事件处理程序初始化编辑器。

问题,“this”指的是编辑器的范围,而不是知道 $refs 的“this”。问题,我如何传入全局属性?

我的模板

我的 Vue 代码

0 投票
1 回答
226 浏览

vue.js - 我正在使用tiptap。如何从子组件预览到父组件

下面是我的代码。

父.vue

Tiptap.vue

在这样的结构中,如何将子组件的内容输入值发送给父组件呢?

为了在父组件中实现预览功能,必须实时获取子组件的内容。

我找不到用 computed 的 html 做任何事情的方法。

请告诉我如何在父组件中实现子组件(tiptap.vue)的编辑器输入作为预览。

0 投票
1 回答
66 浏览

tiptap - 我的tiptap bubble_menu 可以工作,但在单击菜单项时它也会提交表单

例如,我正在使用这个:

但是我从不和谐服务器上的好心人那里得到了解决方案。

0 投票
0 回答
77 浏览

reactjs - TipTap useEditor 返回 null

我正在使用useEditorTipTap 库中的函数来创建一个编辑器,但它首先返回 null。我的意思是,如果我使用useEditor并立即记录我设置的变量,它会返回 null,但之后会返回一个 Editor 对象。我将 React 与 create-react-app 一起使用。

我的 App.js 文件中有这个:

它打印出这个: 错误图像

代码沙箱:https ://codesandbox.io/s/zealous-darwin-iswww?file=/src/App.js

0 投票
1 回答
35 浏览

angular - 向节点元素添加选项

我正在构建一个 Angular 11 应用程序。在这个应用程序中,我使用的是 Tiptap 编辑器。

我正在创建一个自定义节点来支持 div 元素。

此自定义节点的代码是:

如何为 div 设置一个类,我试过了。

0 投票
2 回答
264 浏览

reactjs - 提示字体大小反应

我在我的反应应用程序中使用tiptap作为编辑器,问题是我还没有找到如何在我的编辑器中修改字体大小,我已经搜索了一个外部包但我没有找到任何。有人可以告诉我是否有一个字体大小包,用于带有 react 的tiptap?

0 投票
1 回答
37 浏览

nuxt.js - Tiptap 移除 Nuxt 项目中的 Vuetify 包

我有一个带有 Vuetify 的 Nuxt 项目,我想使用 Tiptap 作为所见即所得的输入。我遵循 Tiptap 安装指南,它是:npm install @tiptap/vue-2 @tiptap/starter-kit. 在安装过程中,似乎删除了一些软件包。结果,安装后该应用程序将无法运行。它发出一个错误Cannot find module 'vuetify/es5/util/colors',我已经研究过,发现它是由于缺少已删除的 Vuetify 包引起的。我通过将 Vuetify 添加为带有vue add vuetify. 一切都恢复正常,但每当我尝试安装任何 Tiptap 扩展时,问题都会再次发生。这里有一个开源预定义插件https://github.com/iliyaZelenko/tiptap-vuetify工作得很好,但它不符合我的需要。在这个特定的堆栈中有什么建议吗?

0 投票
0 回答
17 浏览

tiptap - 如何在其插入上方的新行中添加组件(图像)?

在我的气泡菜单(最后)上有一个按钮,可以使用文档中概述的添加图像功能添加图像。

示例1

但是,如果我从突出显示此文本的气泡菜单中添加图像,它将用新图像覆盖该文本。结果将如下所示:

示例2

我怎样才能使企鹅的图像直接插入突出显示的节点上方而不是覆盖它?

非常感谢任何和所有帮助。

0 投票
0 回答
48 浏览

javascript - 对 Tiptap 编辑器的行为感到困惑?

我正在尝试 Tiptap 编辑器并使用一些虚拟代码。但我对这种行为感到困惑。有人可以帮我理解这种行为吗?

下面是我正在尝试的虚拟代码(以下 4 个案例是单独尝试的,只是在这里提到我将它们放在同一个大括号下的一个代码块中):