问题标签 [prose-mirror]

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 投票
3 回答
642 浏览

vue.js - TipTap/VueJS - 如何检测按键

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

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

示例代码如下:

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

谢谢

0 投票
1 回答
941 浏览

javascript - 粘贴纯文本时如何更改tiptap 的行为?

我目前正在尝试使用一个名为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,那应该没问题。

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

0 投票
0 回答
17 浏览

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

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

示例1

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

示例2

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

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

0 投票
0 回答
48 浏览

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

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

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