问题标签 [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 投票
1 回答
1469 浏览

prose-mirror - 如何替换 ProseMirror 中当前选定的内容

目前在 ProseMirror 中有点迷失,并试图理解替换当前选择文本的正确方法。我希望能够在小写/大写之间切换大小写。

state.selection.content();将返回所选内容下相关节点的切片以及所选内容,但不返回每个节点内需要替换的范围。

我假设我需要创建一个新的文本节点来替换每个选定节点内的范围,例如:

如何获得每个节点内要替换的范围?

不幸的是,我找不到合适的例子。

0 投票
1 回答
244 浏览

prose-mirror - Tiptap - OnNodeActive / onMarkActive 事件?

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

使用 VUEJS,isActive 在模板中是响应式的(在插槽中传递),但我们可以在 javascript 中做到吗?

0 投票
1 回答
543 浏览

javascript - tiptap prosemirror 应该只有特定节点可编辑

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

例如:

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

我怎样才能做到这一点?

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

0 投票
0 回答
163 浏览

prose-mirror - ProseMirror/vue-tiptap 替换 nbsp 到空间

&nbsp;当有人粘贴某些文本或 HTML 时,我一直在尝试自动替换为正常空间。preserveWhitespace 选项对我没有多大作用。

有谁知道如何&nbsp;用 ProseMirror 自动替换?

0 投票
1 回答
1958 浏览

javascript - ProseMirror - 将插入符号位置设置为所选节点的末尾

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

0 投票
0 回答
98 浏览

javascript - Clojurescript 与 ProseMirror 互操作

我想将修改后的 ProseMirror 编辑器添加到基于 figwheel-main 的 Clojurescript 项目中。在建立了一个小型实验项目之后,我只是想从ProseMirror 指南中重现这个非功能编辑器。

我从模板中设置了一个 figwheel-main 项目并添加了几行代码:

let在任何其他功能之外——我只是想让互操作性工作以创建一些对象。这编译没有错误或警告。尝试加载时,浏览器控制台会抛出错误,

TypeError: undefined is not an object (evaluating 'this.state.plugins')

并且view永远不会创建。goog.objectget函数显示editor-state确实包含一个空plugins值,#js []

导致构造EditorView对象失败的问题是什么?

0 投票
1 回答
173 浏览

angular - 是否可以在 Angular 的 kendo-editor 中以某种方式使用管道?

是否可以在 Angular 的 kendo-editor 中以某种方式使用管道?

我的用例如下。我已经实现了将图像从本地机器上传到我自己的端点(如此处所述。另外,我实现了一个返回图像的 get 端点。因此,我可以使用链接通过src图像属性检索图像。但是我需要对用户进行身份验证才能调用 get 端点。

我对这个问题的研究:How to intercept the src http request and set headers for it?引导我找到了一个带有安全管道的解决方案,它将为我运行请求。例如,这篇文章描述了解决方案。

我能够实施解决方案。所以,现在在我的 Angular 模板中,我有:

图像是通过端点加载的,因为我能够使用身份验证(因为我显式运行 http 请求而不是将其委托给浏览器)。

所以,如果我能够以某种方式添加代码,那将是非常非常棒的

进入剑道编辑器值并实际看到图像。但我不知道如何在剑道编辑器的值内使用管道。

对于身份验证,我使用带有不记名令牌的标头。

那么,有人可以建议我如何在剑道编辑器中使用管道吗?

预加载图像并将它们作为 base64 存储在剑道编辑器值的 src 中的选项不适合我,因为在我的剑道编辑器值中可能有很多图像,我将值存储为数据库中的字符串。因此,如果我使用 base64,我可能会很快用完空间(因为,我会将所有图像存储在文本中)。

更新

是我使用指令的尝试。可以看到指令的类被添加到图像中,但警报消息不会触发。

指示:

验证该类已添加到图像中:

在此处输入图像描述

是 kendo-editor 组件 api。

该指令本身工作正常。如果我们在<img class="customDownload" />app.component 的模板中添加 ,那么指令中的代码将会到达并且会触发警报。

0 投票
0 回答
81 浏览

angular - Angular 指令在 `contenteditable` 元素中不起作用

contenteditableAngular 指令在元素内部不起作用。我该如何解决?

这是我的示例用例。

我有一个指令:

当我在customDownload类之外添加一个元素时,contenteditable我收到了预期的警报消息:

现在我将代码更改为以下内容:

前往Upload Image

在此处输入图像描述

上传图片:

在此处输入图像描述

在此处输入图像描述

检查图像是否使用必要的类上传:

在此处输入图像描述

现在我看到该元素已添加到 DOM,但 Angular 只是忽略了它,并且没有运行指令构造函数。

是来自 stackblitz 的工作示例。

我需要为动态添加的元素(即带有 class 的图像)运行指令(即要显示的警报消息customDownload)。我怎么能做到这一点?

0 投票
1 回答
420 浏览

wysiwyg - 如何将表情符号添加到 ProseMirror?

我开始使用 prosemiror,但我正在努力寻找它的扩展。即使是标签、提及或表情符号等基本扩展也很难找到。我错过了这个编辑器的东西吗?我知道它非常成熟(试图放弃草稿以支持它),但我可能会在这里错过一些东西。

0 投票
1 回答
184 浏览

reactjs - 如何在 Atlaskit 中指定自定义媒体客户端,尤其是 @atlaskit/editor-core

我正在尝试在我自己的项目中使用@atlaskit/editor-core,并希望指定我自己的 Fileserver/MediaClient。Atlassian 确实提供了一个功能,我可以在其中模拟客户端,而不是真正模拟它以这种方式注入我自己的客户端......但这真的是最好的选择吗?

由于@atlaskit/editor-core 上的文档相当小,我不知道该去哪里找...

到目前为止的发现:使用以下行可以启用模拟。

最小的例子:

任何链接、方向、建议或起点将不胜感激!!