问题标签 [tiptap]

尝试为 Vuefity 安装 WYSIWYG 编辑器 Tiptap 时，是否有人出现此错误？

这是错误：

然后这是我的主要 Vue 文件：

最后是我的package.json文件

似乎没有任何工作。我什至查看了错误中提到的那些文件，看起来这不是问题的根源。但为了完整起见，这里是文件_theme.sass

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

我已经阅读了很多关于tiptap 的信息，但文档并不是最好的，prosemiror 本身对我来说非常复杂。我希望你能帮助我。

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

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

我怎样才能让内部编辑器部分（用细蓝线突出显示）达到全高。这是由tiptap 编辑器创建的内部元素：

更新：

我在渲染输出中手动添加了类（'col' 和 'column'），现在它按我想要的方式工作。有没有办法做到这一点而不必触及元素的类属性？

这是我在 quasar 示例应用程序中使用的组件代码。我在编辑器周围的 div 中尝试了无数不同的类变体。我所做的一切似乎都不会影响上面生成的“contenteditable”div 容器。

我一直在学习 Vue.js 和 Quasar UI 工具集。我想使用 TIPTAP WYSIWYG 编辑器组件（可在此处获得：https ://github.com/scrumpy/tiptap ）。我对他们的示例很好，我可以让组件加载并正常工作。但是对于我的生活，我无法弄清楚如何从一开始就让内部编辑部分（当您单击它时以蓝色勾勒出来）变为“全高”。

我已经尝试了我能想到的一切，并搜索并搜索了某种示例。当您添加内容时，编辑器会很好地扩展（增长），但由于某种原因，我无法让它从全高开始 - 我会注意到该示例也没有说明。

我不做什么？

我正在尝试通过传入自定义正则表达式来解决 Tiptap（Vue 的 WYSIWYG 编辑器）中的这个错误_value_，以便在 Markdown ( ) 中标识斜体符号的正则表达式不会应用于以@or开头的字符串#，例如#some_tag_value不会转化为#some标签值。

到目前为止，这是我的正则表达式 -/(^|[^@#_\w])(?:\w?)(_([^_]+)_)/g
编辑：在 @ Wiktor Stribiżew 的帮助下新的正则表达式/(^|[^@#_\w])(_([^_]+)_)/g

虽然它满足大多数常见情况，但当下划线位于单词中间时，它目前仍然失败，例如 ant_farm_ 应该匹配（ant farm）

我还在这里https://regexr.com/50ibf提供了一些“应该匹配”和“不应该匹配”的案例，以便于测试

应该匹配（在下划线之间）

不应该匹配

我正在使用 Vue.js + 打字稿。我有项目“A”，其中我使用了一个私有 npm 包“B”（它是一个组件库），其中我使用了另一个包 - 'tiptap' 库。默认情况下它没有类型，所以我在项目“A”中编写了我的 shims.d.ts 文件，我在其中声明了模块“tiptap”

它工作正常。但是当我将此文件移动到包 B 时，TypScript 看不到它们并导致没有类型的错误。 查看包B的文件夹

找不到模块“tiptap”的声明文件。'C:/some_path/tiptap/dist/tiptap.common.js' 隐含了一个 'any' 类型。

我究竟做错了什么？

我正在尝试将 tiptap ( https://github.com/scrumpy/tiptap ) 添加到表单 textarea 字段。

我不能让它工作。我没有收到任何错误，但表单元素不显示。

这是组件：

>

我们在项目中使用了 TipTap 的富文本编辑器。
但是我们有一个问题，即无法正确识别空间，并且只有在每 2 次单击后才会创建一个空间。作为框架，我们使用 Vue.JS。

有谁知道假设每两个空格的原因是什么？

我想收到一个节点或标记处于活动状态的通知（单击或键盘移动后）。

使用 VUEJS，isActive 在模板中是响应式的（在插槽中传递），但我们可以在 javascript 中做到吗？

我正在尝试向 scrumpy/tiptap 添加自定义扩展，但我的项目使用的是打字稿，我认为这给我带来了一些问题。

我从这个问题中得到了代码，并尝试像这样导入和使用它：

但我面临这个错误

类型“HighlightMark”不可分配给类型“ExtensionOption”。类型“HighlightMark”不可分配给类型“Mark”。'schema.toDOM(...)' 返回的类型在这些类型之间不兼容。类型 '(string | number | { style: string; })[]' 不可分配给类型 'DOMOutputSpec'。类型“(string | number | { style: string; })[]”中缺少属性“0”，但在“DOMOutputSpecArray”类型中是必需的。

我尝试在 .d.ts 中导入它（因为我必须使用所有内置的 Tiptap 扩展），但我收到一个错误，告诉我我无法从此处的相对路径导入文件：

环境模块声明中的导入或导出声明不能通过相对模块名称引用模块。ts(2439)

我也尝试将文件更改为打字稿（HighlightMark.ts），但它给了我几个错误：

'HighlightMark' 类型中的属性 'commands' 不能分配给基本类型 'Mark' 中的相同属性。类型 '({ type }: { type: any; }) => (attrs: any) => Command' 不可分配给类型 '({ type, schema, attrs }: { type: MarkType; schema: MarkSpec; attrs : { [key: string]: string; }; }) => CommandGetter'。类型 '(attrs: any) => Command' 不可分配给类型 'CommandGetter'。

和

'mark' 已声明，但其值从未被读取。ts(6133) 参数 'mark' 隐含地具有 'any' 类型。ts(7006)

和

参数“attrs”隐式具有“任何”类型.ts(7006)

有没有人这样做过？真的有可能吗？

这是来自 HighlightMark.js 的代码：

prosemirror 的令人敬畏的tiptap 包装器附带了很好的文档，但它缺乏一些说明如何在开发自定义扩展时处理一些（我认为）基本场景。

我的问题是在 vue 组件的上下文中如何在节点上调用 toggleWrap。我找到了使用事务并允许删除的示例-但我想要的是清除节点，使节点的文本保持不变。

任何帮助都是极好的。谢谢。