问题标签 [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 回答
2389 浏览

javascript - 在 react-draft-wysiwyg 上使用 formik

我正在使用formik我的表格。我想react-draft-wysiwyg用formik实现编辑器。但是,在我的情况下,我发现了以下警告。

因此,我认为,如果它有验证问题,我将无法显示错误,并且如果我移动到下一个表单并返回到我在编辑器上放置内容的表单,状态也不会保留。

这是对这些问题负责的警告还是我错过了一些重要的事情?

这是我尝试绑定formik的方式react-draft-wysiwyg

渲染表单时,我正在执行以下操作

我从服务器获得的数据显示在编辑器上。

0 投票
2 回答
3877 浏览

reactjs - 如何将 react-draft-wysiwyg 自定义组件与 React-Final-Form 集成

我正在尝试学习如何使用 React-Final-Form(简称 RFF)。

我已经学会了如何使用<Field>组件,但现在我需要添加一个自定义组件来使用 RFF 不提供的 WYSIWYG 编辑器。

所以,我选择了 react-draft-wysiwyg。

好的,首先这里是我的表格:

这是编辑器文件:

返回正确的<WYSIWYGEditor />值,那里没有问题,但我不知道如何通过使用name='editor_content'以及单击表单submit按钮时将此组件集成到 RFF 流中。

任何帮助深表感谢。

0 投票
1 回答
1367 浏览

node.js - 如何以只读模式获取 Draft js 中的链接?

我正在创建一个简单的博客写作应用程序。我使用 Draft.js 作为编辑器。我可以在写博客时创建链接,但是当我进入阅读模式时,所有链接都丢失了。这是用于编写和阅读博客的 React 代码。为简单起见,我将 editorState/data 存储在 localStorage 中。这是 WriteBlog.js 文件

这是 ReadBlog.js 文件

0 投票
2 回答
4116 浏览

javascript - react-draft-wysiwyg 正文中如何调整内容样式

我是新手,我已经完成了,draftjs editor但是当我尝试使用代码时,没有显示边框。

这是编辑器的快照:

身体的边界

我的代码:

这里是整个代码:“ https://codesandbox.io/s/distracted-ritchie-s75re

尝试给出边界,但问题是当我写更多的单词时,它会超出边界。任何人都可以在这个查询中帮助我吗?

0 投票
1 回答
1542 浏览

reactjs - react-draft-wysiwyg - 警告:不能调用 setState

我确实使用 react-draft-wysiwyg 制作了一个简单的反应应用程序,但我收到了警告。

当我单击编辑器时,我会在控制台中出现此错误,但仅当我在 StrictMode 中运行它时:

警告:无法在尚未安装的组件上调用 setState。这是一个无操作,但它可能表明您的应用程序中存在错误。相反,在 r 组件中直接分配this.state或定义state = {}; 具有所需状态的类属性。

我确实为您制作了一个 codeSandbox:https ://codesandbox.io/s/strange-monad-lxtuu?file=/src/index.js:0-295 尝试单击编辑器并查看控制台中的警告。我做错了什么?

0 投票
2 回答
3208 浏览

reactjs - initialValues 不适用于 react-draft-wysiwyg 字段(redux-form)

我正在尝试在 redux-form 中使用 react-draft-wysiwyg 编辑器,一切正常,但唯一的问题是 initialValues 似乎不适用于编辑器字段。

这是我的 Form.js :

这是 EditorFieldComponent.js:

这是 EditorComponent.js:

这是我尝试使用initialValues的地方:

另外我应该说 initialValues 适用于 'description' 和 'title' 字段,只有 'editor' 字段有这个问题。

0 投票
1 回答
2144 浏览

reactjs - 在 react-draft-wysiwyg 编辑器中加载文本时出现问题

在我的项目中,我集成了来自 react-draft-wysiwyg 的编辑器。现在我需要通过加载一些文本数据来测试文本编辑器。我尝试遵循文档,我的代码目前如下所示:

我试图按照文档进行操作,但没有加载 json。我试图了解解决方法,但因为我以前从未使用过 DraftJS,所以无法理解。谁能帮我这个?

0 投票
0 回答
144 浏览

reactjs - 如何将样式数据从文本编辑器发送到 mongoDB?

我无法知道如何将样式数据从 React 中的文本编辑器发送到 MongoDB,然后如何将相同样式的数据返回到前端,例如。在博客中,用户通过对文本应用一些样式来提交博客描述,我希望将文本以相同的样式存储到 MongoDB 即数据库中,然后在前端的博客列表中显示相同的样式。

PS:请原谅我的英语

0 投票
2 回答
822 浏览

reactjs - 如何在草稿 js 中创建自定义键绑定(Ctrl+Enter)

我需要使用 Ctrl+Enter 来调用 Draft js 中的函数

因此,正如在这个问题这里提到的那样,我这样写了我的代码,但它不能很好地工作。

我在编辑器道具中设置它的方式:

此功能适用于 Ctrl+k 或其他键。

我尝试的另一种方法如下所示,您可以在 https://codepen.io/michael_cox/pen/xrvdRW?editors=1111中查看它, 但对我来说它也不起作用。也许是因为使用草稿所见即所得

0 投票
2 回答
1608 浏览

javascript - React-Draft-Wysiwyg:自动滚动新行

如何使编辑器的输入在新行输入时自动向下滚动?就像在https://jpuri.github.io/react-draft-wysiwyg/#/demo的示例 6 中一样。现在滚动停留在顶部,文本光标在低于底部边框时隐藏。