问题标签 [draft-js-plugins]

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

javascript - 向 React Draft Wysiwyg 添加水平规则按钮

我正在尝试向React Draft Wysiwyg添加一个自定义按钮,以便在我的内容 中插入一个<hr>标签。

使用演示和文档,我设法让自定义按钮插入文本而不是标记。

我现在正在尝试使用此示例创建一个Atomic 类型的块,但我不知道如何更改<hr>元素的图像。

我似乎无法在任何地方找到将自定义 HTLM 插入编辑器的任何示例。有人可以指出我正确的方向吗?谢谢!

0 投票
1 回答
516 浏览

javascript - Draft.js中如何使用策略函数Decorator?

我一直在玩 Draft.js 中的装饰器,但是当我无法构建自定义装饰器时,我将文本发送到 API,我将收到包含在编辑器中输入的一系列错误单词的响应所以我正在尝试构建一个 Strategory 函数,将样式应用于该数组中的所有项目

我错过了什么它不起作用?

0 投票
2 回答
6637 浏览

javascript - 如何在 react-draft-wysiwyg 中添加自定义下拉菜单?

我需要在工具栏部分添加自定义下拉菜单。

这里附加的图像类似于想要下拉菜单这可能吗?

找到下面的详细图片

在此处输入图像描述

我使用了 react-draft-wysiwyg 内容编辑器。

https://github.com/jpuri/react-draft-wysiwyg

https://jpuri.github.io/react-draft-wysiwyg/#/d

在工具栏部分添加自定义下拉菜单。

0 投票
1 回答
2001 浏览

javascript - 如何将道具传递给draft.js中装饰器的策略功能

我有一个装饰器的策略函数,我想将道具传递给策略函数我尝试了下面的代码,但它让我无法读取 undefine 的属性道具

道具只是我从 mapStateToProps 得到的单词数组,我确实尝试用函数内部的值进行分配,它可以工作,但是当我想将道具传递给函数时,它不会工作任何想法如何将道具传递给它

0 投票
1 回答
3033 浏览

reactjs - Draft-js-plugins 中的自定义内联工具栏不起作用

文档中规定的自定义内联工具栏未按预期工作。即使添加了自定义按钮,它也会一直显示默认的内联工具栏。

我的代码如下。

版本如下。

  • “反应”:“^16.4.1”
  • 草稿-js-plugins-editor": "^2.1.1"

提前致谢。

0 投票
0 回答
156 浏览

javascript - entityRanges 与 emoji 不匹配作为提及的主要文本

我正在使用提及插件,它在没有表情符号/unicode 的情况下按预期工作得很棒。

我的情况

例如:“ dude Suresh Chandrababu”是我在编辑器中的文字。提到了苏雷什·钱德拉巴布。

我需要提取提及偏移位置、长度并发送到我的 API,这里的问题是当在提及之前添加 emojis/unicode 时,草稿编辑器返回的偏移是错误的。

预期 o/p:entityRange - 偏移量:3,长度:18 实际 o/p:entityRange - 偏移量:2,长度:18

Emoji 的长度为 2,但 entityRange 将其视为 1。

如何处理这种情况。

o/p:在此处输入图像描述

0 投票
1 回答
1479 浏览

reactjs - 如何在 react-draft-wysiwyg 中包含附加文件选项?

我正在尝试使用 react-draft-wysiwyg 创建一个文本编辑器。

编辑器代码

我想添加带有 pdfs、txt、docx、xls 等扩展名的文件作为附件。谁能指导我如何实现文件附件?

0 投票
0 回答
845 浏览

reactjs - 当在 React-draft-wyswyg 中添加自定义块渲染时,上传的图像未在文本编辑器中添加为内联

我有一个使用 react-draft-wysiwyg 创建的文本编辑器。我创建了一个自定义块渲染功能,可以添加自定义块。

编辑器代码:

渲染图

块渲染功能

图片回调函数

自定义块渲染按我的预期工作。但是当我包含自定义块渲染时,上传图像功能无法正常工作。添加的图像不是内联添加的。

当我尝试添加 Image 时,我将 atomic 和 FileAttachment 作为 contentBlock 类型,这可能会限制图像内置功能。当我检查编辑器的内容时​​,有图形标签,但图形标签上没有附加 img 标签

有人可以帮我找出解决方案吗?

0 投票
1 回答
143 浏览

draftjs - 单击时为实体设置 SelectionState

我有一个案例,我可以点击一个实体,然后选择新的内容来替换整个实体。例如:

选择新内容后,替换旧的实体文本,变为:

基本上,我正在尝试做:

我试过使用currentContentState.getSelectionBefore(key).getStartOffset()currentContentState.getSelectionAfter(key).getStartOffset()但值似乎不可靠。

我应该如何获得实体的正确开始和结束偏移量?或者,有没有更好的方法来解决这个问题?

0 投票
1 回答
3278 浏览

reactjs - 制作由 Formik 控制的 DraftJS 编辑器:字符串值不能很好地转换为 EditorState

我使用 react-draft-wysiwyg 编辑器,它的状态应该由 Formik 控制。这个想法是 Formik 的值是一个字符串,因此 Editor 状态使用 stateToHTML 转换为 HTML 并设置为值,当从 Formik 接收时,它从 HTML 转换为 EditorState。由于能够使用 Formik 方法重置表单,因此来回传递且不受 Editor 本身控制的值是必不可少的。此外,该值需要从表单作为字符串发送,后端不应该知道前端使用了哪种编辑器。

问题是,尽管带有 html 的字符串在 Formik 之间传递得很好,但更新数据却出错了。更新字符串后,光标返回到编辑器窗口的最开头(输入?)并将新键入的字符串添加到字符串前面。看起来我是从右到左打字的。但是,退格键和删除键按预期工作。

Formik 像这里一样使用它

这是编辑器的设置方式