问题标签 [draftjs]

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 回答
3314 浏览

javascript - DraftJS 在焦点上触发内容更改?

save我在页面和按钮上有一个编辑器。我希望save仅在有更改时才出现按钮(自上次保存以来)。因此,当您保存时,我设置this.setState({hasChanges: false})并在onChange功能中设置hasChangestrue.

这一切都很好。问题是onChange当编辑器获得焦点时编辑器将触发事件(但内容尚未更改)。而且,根据他们的文档,这是预期的行为

组件内的事件监听器将观察焦点变化并按预期通过 onChange 传播它们,因此状态和 DOM 将保持正确同步。

有什么方法可以知道onChange方法内部的内容是否发生了变化,还是只有选择发生了变化?

0 投票
2 回答
1010 浏览

reactjs - 一次使用插件的多个 Draftjs 组件

我一直在使用带有richbuttons 插件的draft js,如果我只有一个编辑器组件,一切都很好。但是,当我尝试在页面上添加多个组件时,丰富的按钮仅适用于最近添加的编辑器。

我已经阅读了有关添加多个插件的信息,但它们包含的示例并未考虑将组件导入插件。我想做的是这样的:

但是如果我尝试这样做,我会收到一个编译错误说

我计划在我的单页应用程序中同时运行 8 个以上的编辑器,所以有没有办法为每个将连接到各自编辑器组件的丰富按钮插件初始化,并重用相同的按钮组件(即斜体按钮、粗体按钮)?

老实说,我不太了解这一行的语法:

因此,任何了解那里发生的事情的资源将不胜感激,谢谢!

0 投票
3 回答
7994 浏览

javascript - 如何处理 Draft js 中的关键事件

如果我想处理字符输入*,我可以使用handleBeforeInput(str)

如果我想处理 的输入ENTER,我可以使用钩子handleReturn(e)

但是如果我想处理的输入DELETE,怎么办?

0 投票
1 回答
2280 浏览

reactjs - 如何在 Draft.js 中正确添加没有 2 个空行的图像(原子)

默认情况下,draft.js 将任何带有 2 个空行的原子类型块(1 个在 atimic 之前,1 个在 atimic 之后)。这种行为是由于 draft.js 中缺少原子选择,并在此处进行了描述。我怎样才能摆脱那些线?我在修改器中没有找到任何合适的功能。也许有人有另一种解决方案来解决这个问题,因为现在看起来不太好

更新:我找到适合我的解决方案:

0 投票
1 回答
3277 浏览

reactjs - Draft.js:如何在原子之前插入新块

我想在块后添加新行。我当前的功能是下一个:

新块插入到我的内容末尾,但是当我单击新创建块时出现此错误 -

以及错误所在的文件

什么会导致此错误以及如何正确执行插入?

0 投票
2 回答
1479 浏览

javascript - Draft JS 从 HTML 中识别 img

我正在使用 Facebookdraft-js来创建所见即所得。我正在尝试使用 native 将 HTML 转换为 editorState convertFromHtml。但它无法识别img标签。

这样做会完全删除图像。有任何想法吗?

0 投票
1 回答
1936 浏览

draftjs - Draft.js:我可以修改现有实体而不将其应用为新实体吗?

我正在尝试将 Draft.js 用于富文本编辑器,其中要求能够编辑链接的 url。在我见过的所有示例中,您可以将实体应用于选择范围,但实体已经存在。我只是想改变它的价值。

如果不重新应用就无法更改 url,是否有一种好方法可以将实体重新应用到当前应用的相同范围?

任何帮助,将不胜感激。

0 投票
2 回答
957 浏览

javascript - Draft.js 编辑器在第一个单词后失去了对 Android 浏览器的关注

Draft.js在一个React.js项目中使用。编辑器在桌面浏览器(Chrome、Firefox、IE、Edge...)上运行良好,但我在 Android 设备上遇到问题。

在编辑器中输入第一个单词并按空格键(在软键盘上)后,编辑器失去焦点,如果我想继续在编辑器中输入,我将不得不再次触摸那里。

这是非常糟糕的用户体验。编辑器Draft.js设置没有什么特别之处,就像他们的例子一样。

任何人都有同样的问题并有解决方法吗?

0 投票
1 回答
3952 浏览

javascript - 在 draft.js 中获取插入符号位置(行号)

你如何在 Draft.js 中获得插入符号的位置?我猜您可以从 selectionstate 中获取块,然后获取块数组并查看块数组在哪个位置,但我不确定这是一种可靠的方式,甚至是最好的方式。

0 投票
0 回答
953 浏览

javascript - Draft.js contentState.createEntity 不是函数

我复制了 draft.js 编辑器的示例并运行它。这是来自官方存储库的示例。 https://github.com/facebook/draft-js/blob/master/examples/draft-0-10-0/link/link.html 但是当你点击按钮时

在此处输入图像描述

该功能_confirmLink失败:

Draft.js 无法创建实体。console.log('contentState->', contentState) 输出到控制台:

在此处输入图像描述

在这种情况下可能是什么问题?