问题标签 [tiptap]

我正在使用 Livewire/Alpinejs 堆栈并且还安装了tiptap 编辑器。到目前为止，在此链接之后，编辑器与其基本功能/按钮一起工作。我想要的是在游戏中添加气泡菜单扩展。我已经安装了该软件包，并且还按照此链接中的文档进行了操作，但它不起作用（选择单词气泡菜单后不会出现）。这是下面的代码。

我正在尝试使用 reactjs 创建一个带有tiptap的文本编辑器。我想在编辑器的每个“块”旁边创建一个按钮（paragraph块，blockquote块，codeblock块，...），允许用户在所选块之前添加一个新的空块。它看起来像这样（概念编辑器）：

所以我尝试这样做的方法是将光标位置设置在当前节点的末尾：

所以在这一点上，它起作用了。但是，当我尝试node在这个位置插入一个新的......

...我收到一个错误：TypeError: Cannot read property 'nodeType' of null

因此，为了让您详细了解此错误，我在 codesandbox.io 上制作了一个沙箱。要重现该错误，您只需专注于编辑器，随意编写一些内容，然后单击+按钮。您应该看到错误。

在此先感谢您的帮助 ！

我正在尝试按照官方文档将tiptap/vue-2 编辑器添加到我的项目中。我按照以下步骤操作：

1. rm -rf node_modules/ yarn.lock

2. yarn add @tiptap/vue-2 @tiptap/starter-kit

3. yarn install（至此全部加载完毕，错误发生在第四步）

4. 我已添加import { Editor } from '@tiptap/vue-2'到我的 .vue 文件之一并尝试刷新浏览器，但出现此错误时：

   未捕获的错误：模块解析失败：意外令牌 (41:17) 您可能需要适当的加载程序来处理此文件类型。

   | .find(nodeItem => nodeItem.type.name === type.name);

   | 如果（节点）{

   | 返回 { ...node.attrs };

   | }

   | 返回 {}

请注意，该项目正在使用 webpack。

我正在使用https://github.com/Leecason/element-tiptap，它有两种上传图片的方法，通过 URL 或上传图片，我找不到关于该主题的太多信息，但我想知道我是否可以更改图像的加载方式，目前它以 64 为基数，但我希望一切都来自 cloudinary，以便加载更快或有一种加载更快的方法。

我在我的Nuxt 项目中使用Tipap文本编辑器。我可以将初始内容 (in ) 传递给另一个组件 (in )，但是当数据更新时，正在传递的初始内容不会更新。它不断获得相同的数据。components/blogs/Editor.vuepages/blogs/editor.vue

这是我的代码：

在components/blogs/Editor.vue

在pages/blogs/editor.vue

我有一个协作聊天应用程序，它使用tiptap作为它的消息传递区域。我发现它很有用，因为它已经可以支持多种格式并且可以增加一些灵活性。但是，在寻找侦听“输入”键的事件侦听器时，我发现自己卡住了。当用户按回车键时，我想提交他们的聊天并清除编辑器。

我找到了这个onUpdate事件监听器，但我找不到它检测到按下什么键的确切位置。

示例代码如下：

我正在使用 Vue2，顺便说一句。

谢谢

我正在尝试获取输入到所见即所得的文本以将其存储到我的数据库中。

我尝试了很多不同的东西，这是我最近的迭代：

并且我得到的错误是 value 不是目标上的属性。我相信这是因为它不再是 HTML 输入元素，但我不确定现在如何获取该内容以放入数据库？

我正在开发一个基于 React 的 Google Docs 克隆作为一个副项目。我使用 TipTap 作为基础。

我想尝试模仿 Google Docs 中的功能，其中选择字段将根据用户选择的任何文本更新为适当的值（例如，如果用户使用 < 突出显示文本，则“标题 1”将显示在选择字段上h1></h1> 样式）。

这是我想模仿的功能的小视频：https ://i.gyazo.com/18cc57f0285c8c5cd80d5dd6051f0ee7.mp4

这是我迄今为止使用用于选择字段的 React Hook 的代码：

我试图围绕 React Hooks 和 Selection API，但我被困住了。这在 Javascript/React 中是否可行？

编辑：

我从 Tiptap 的 API 中找到了一个函数，它完全符合我的要求。我想现在的问题是如何将该值更新到选择中？这是我的新代码：

感觉解决方案非常简单，但我只是想多了。

我目前正在尝试使用一个名为tiptap 的库来实现一个可视化编辑器。

https://v1.tiptap.dev/

我认为 v2 是最常见的tiptap，但在某些情况下必须使用 v1。

但是，当我将纯文本粘贴到tiptap中时，我对这个行为并不满意，当我查看它时，我发现库中的prosemimirror中设置的条件与我的预期不同。

https://github.com/ProseMirror/prosemirror-view/blob/master/src/clipboard.js#L57-L59

似乎 prosemiror 将单个换行符转换为<p></p>. 我想更改条件，以便它转换为<br>是否有一个换行符，以及<p></p>是否有两个换行符。但我不知道如何做到这一点，而且我很难过。

我首先使用tiptap 的EditorProps功能覆盖prosemirror 的整个处理过程clipboardTextParser。但是，clipboardTextParserprosemiror 中使用了许多变量和对象，我不知道如何在 editorProps 中编写它们。我放弃了，因为我不知道如何继续。

有没有办法解决这个问题？我在想，如果tiptap 可以做几乎相同的事情clipboardTextParser，那应该没问题。

请原谅我蹩脚的英语。请帮我！

我正在使用tiptap-vuetify（https://github.com/iliyaZelenko/tiptap-vuetify）作为我所见即所得的编辑器。但我不想要默认样式。唱它不把类或风格作为道具我怎么能按照我想要的方式来设计它（比如去除阴影，把灰色变成白色等）