问题标签 [react-draft-wysiwyg]

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

reactjs - 左对齐似乎会创建额外的间距草稿 js

在此处输入图像描述

当我单击左对齐时,会出现额外的间距。

我正在使用“react-draft-wysiwyg”:“^1.14.4”

任何帮助将不胜感激。

0 投票
1 回答
2046 浏览

javascript - 如何将 react-draft 不受控制的编辑器内容转换为 html?

我正在尝试使用react-draft-wysiwyg来编辑从服务器获取的数据。问题是我将编辑器放在渲染道具中,所以我不能更改editorState,因为这会导致无限循环。我将编辑器配置为不受控制,只从表单中获取数据。

据我了解,stateToHTML不适合这里,因为它需要状态,但这里我们有一个对象。你能告诉我,还有其他功能可以在发送前转换编辑器数据吗?还是选择其他编辑器而不是draft-js更好?

表单提交处理程序位于and-design表单的onFinish内。这是组件列表:

问候。

0 投票
1 回答
1708 浏览

draftjs - 行间距反应草稿所见即所得

我想在 react-draft-wysiwyg 编辑器中实现行间距选项(单,双,精确,每英寸行),但目前我认为它不支持自定义行间距打开问题,问题陈述是我想申请根据用户输入不同段落的不同行距我应该如何实现这个功能?

通过更改编辑器的行高,它将在整个编辑器上应用行高,但我想具体说明用户选择的段落

0 投票
1 回答
2920 浏览

reactjs - react-hook-form 控制器与 react-draft-wysiwyg

我需要帮助。我在我的项目中使用 react-final-form,但我决定更改为 react-hook-form。顺便说一句,我喜欢它,但我被卡住了。:/

在我的页面上,我正在使用编辑器从用户那里收集一些信息。目前我正在使用 react-draft-wysiwyg。这里的代码:

父组件.js

所见即所得Editor.js

请注意: 输入道具来自带有 react-final-form 的编码。输入正在传递我正在输入的字符。所以,如果我input作为道具离开,它会失败,因为它不存在。React-hook-form 不传递输入。我已经改变了props

当我输入任何内容时,我会在 console.log 中得到以下信息:

如您所见,值为undefinedController每次在编辑器中键入内容时,如何构造以便传递一个值?

谢谢你的帮助

0 投票
0 回答
1274 浏览

javascript - Draft.JS 如何根据自定义实体创建自定义链接或跨度

使用 draft.js,您如何添加带有元数据的自定义链接实体?我所做的示例:对于我的编辑器菜单按钮之一,我添加了一个单击处理程序,该处理程序创建了一个名为“META_WRAPPER”的实体:

我添加了一个装饰器策略和组件来处理由上述 handleMetaWrapperBtnClick 添加的自定义“META_WRAPPER”实体:

找到'META_WRAPPER'的策略-

为 metaWrapperStrategy 找到的自定义 META_WRAPPER 渲染的装饰器组件:

奇怪的是,上面的内容仅在本地工作,并且仅在我放置断点并逐步执行代码时才有效:

  1. 调用 handleMetaWrapperBtnClick 处理程序,这将导致使用新的自定义实体更新编辑器状态,
  2. MetaWrapperStrategy 运行
  3. MetaWrapper 组件作为结果呈现
  4. 成功 - 选择被编辑器内的自定义 MwSpan 或 MwLink 替换。(MwSpan 或 MwLink 之一将根据 elementType 元字段的值呈现)

但是,在没有断点的情况下运行代码时,编辑器中的选择不会发生任何变化。

此外,当它工作时,不可能将粗体文本等内联样式添加到同一选择中。

我还创建了这个 CodeSanbox 来演示这个问题:https ://codesandbox.io/s/dry-river-qlysv?file=/src/Components/DraftEditor.js

0 投票
2 回答
821 浏览

javascript - react-draft-wysiwyg 缺少编辑器字段输入

react-draft-wysiwyg 缺少编辑框。如何为编辑器输入字段绘制一个框?

在此处输入图像描述

0 投票
0 回答
370 浏览

javascript - 单击时反应草稿所见即所得工具栏不起作用?

当我按正常、图像、链接等时,它没有下拉菜单,这是怎么回事?

在此处输入图像描述

0 投票
1 回答
895 浏览

draftjs - DraftJS。用自定义组件包裹自定义 HTML 标记

尝试用Draft.js 实现类似的东西:

隐藏块的 Gmail 用户界面

更准确地说,我希望通过单击三点图标来编辑和扩展这些隐藏的原始消息块

所以,经过一番研究,我发现有自定义块渲染自定义块组件,所以我试图用 OriginalMessage 组件扩展 blockRenderMap:

所以,这些可能是工作代码,想法是 - 我需要将以下 HTML 解析为相应且可识别的块:

我用来html-to-draftjs将这个 html 解析成块:

但是当我检查假设有original类型的块时,类型是unstyled.

问题是 - 如何让编辑器将<original>标签识别为需要自定义呈现的块?

顺便说一句,不确定这是解决问题的正确方法 - 任何帮助或建议表示赞赏。谢谢!

0 投票
0 回答
1143 浏览

javascript - 编辑器工具栏无法使用反应插件 react-draft-wysiwyg

当单击+文本字段时,工具栏没有显示所有下拉列表,即使我包含css也没有显示。我正在使用这个插件 react-draft-wysiwyg

https://www.npmjs.com/package/react-draft-wysiwyg

在此处输入图像描述

这是视频 https://www.loom.com/share/485fee2f1cf74ed7a37289b074d54139

包.json

0 投票
2 回答
4086 浏览

javascript - 如何自定义 react-draft-wysiwyg 的样式?

我开始使用 react-draft-wysiwyg 并想知道是否可以使用样式和类扩展现有元素?

例如,默认有一个按钮 B(粗体),我想给它添加一些样式和类,我该怎么做?

我的目标是得到这样<p className = "test"> BOLD TEXT </ p>的东西,结果我会在课堂上得到粗体字

例子

或者也许有 react-wysiwyg 另一个为此目的的库