问题标签 [react-draft-wysiwyg]

我正在使用next js并且想在我的项目中导入富文本编辑器，但是当我尝试导入时，react-draft-wysiwyg会显示如下错误：

但是如果我导入相同的编辑器，create-react-app那么它工作正常，我不知道为什么不在我的next js项目中工作。

我已经尝试过next js这样的代码：

请有任何建议。

我有一个两个输入表单和一个段落，当我尝试更改输入的值时，段落会更新，一旦段落更新，我会尝试在草稿库的帮助下编辑段落，但是一旦我更新了段落和保存它，它不会更新段落。

请任何人帮我解决问题

Codesandbox 链接：代码

上下文 API

主页

输入表格

DraftJS

我在我的一个项目中使用 react draftjs。但是，当我尝试通过 url 添加图像时，图像会显示，但是当我保存它并将信息发送到服务器并稍后获取它时，我没有得到任何图像。它只是空的数字标签。

我的状态：

我的编辑器组合：

**想将来自后端 API 的数据发送到我的文本编辑器，然后从文本编辑器更改这些数据，在这里日期组件运行良好，但文本编辑器没有任何意义，如何使用“react-带有 formik 的草稿-WYSIWYG" 文本编辑器**

我在上面提供了一个代码示例，这是完成上述任务的最佳方法，使用 react useEffect 和带有 formik 的“react-draft-WYSIWYG”，文本编辑器值不会改变我的状态

当前的反应应用程序会跟踪 EditorState 并在 EditorState 更改时重新渲染。在使用富文本编辑器时，我们允许并支持能够从弹出窗口的多个选项中附加文本的选项。我们将这些更改带过来，并将新的文本信息推送到 ContentState 中。

问题：每当 EditorState 使用新创建的内容状态实例推送当前编辑器状态时，EditorState 都会返回一个实例，其中 EditorState 从未接收或附加新的内容状态。

示例：在文本编辑器中，当前内容包含Foo，但是当附加文本信息时Test，editorstate 会重新呈现信息FooTest，但随后会触发第二次重新呈现并将 EditorState 恢复为“Foo”。我认为这与确实触发两次的react-draft-wysiwyg Editor组件参数有关。onEditorStateChange

以下是包含重新创建过程的步骤的图像链接。

[文本编辑器状态] https://ibb.co/VBpQrnf

[从选择中附加文本] https://ibb.co/3kV0gnC

[重新渲染计数器] https://ibb.co/Cnd8CBn

包和版本：“draft-js”：“^0.11”，“react”：“^17.0.1”，“react-draft-wysiwyg”：“^1.14.7”

所以我最近正在使用 React 和 socket.io开发这个协作式文本编辑器。

我的 app.js 看起来有点像这样：

}

发生了什么：每当房间中的任何人键入内容时，它都会发出一个套接字事件，然后房间中的每个客户端都会监听该事件，并且每个人都会更改 useState 内容的值，这会强制每个接收到内容的客户端的编辑器重新渲染，因此，实际上不可能在编辑器在您键入时将其值更改为新值的同时进行编写。

应该发生什么：房间里的所有客户都应该获取数据并在他们的编辑器上更新它，但所有人都应该能够同时编写，就像在谷歌文档上发生的那样。

我目前正在为此使用 react-draft-wysiwyg，我知道他们还有很多其他可用的文本编辑器，如果有任何一个可以帮助我解决这个问题，我完全可以更换编辑器。

你可以试试这个：https ://kalam-editor.herokuapp.com/opendocument 只需输入 docid：1234 和密码：1234。（如果显示 docid 不存在，只需单击打开文档按钮 2-3 次）

我正在研究 React-draft.js 编辑器，我能够以纯字符串的形式获取编辑器状态。如何从编辑器状态获取格式化文本以便以 pdf 和 doc 的形式存储

任何帮助或建议将不胜感激，如果有任何其他方法可以达到同样的效果，也请提出建议。

我正在使用 HTML 编辑器开发 React 组件。

目前正在尝试使用 Draft.js 中的 WYSIWYG 编辑器（WYIWYG Draft.js）

这些文档似乎面向基于类的组件，但我正在尝试使用功能组件。

我有来自 API 调用的 HTML 文本并存储在一个变量中，如下所示：

我希望这是初始值 - 在编辑器组件中可见和可编辑。

我已经尽可能地显示文本，但我很确定这是一种非常有缺陷的方法：

const [editorState, setEditorState] = useState(EditorState.createWithContent(ContentState.createFromBlockArray(convertFromHTML(values.overview))));

和组件：

如何根据用户输入更新状态？
我是否需要使用 Content State 进行用户输入？管理这种状态的最佳方法是什么？我已经坚持了一段时间了。

显然，draft js 没有&nbsp在行尾添加，这将导致编辑器继续在同一行添加空格，而不会刹车到新行。此问题已在此处讨论，可能需要更改库的解决方案。与此同时，想知道是否有一种简单的方法可以使用草稿提供的 api 来做到这一点？

我正在使用 react-hook-form 和 react-draft-wysiwyg。用户应该编辑和保存带有 html 字符串的元素。

控制器延迟传递道具，因此它传递未定义（第一次单击元素时）或先前值（第二次单击时）而不是正确的值。

对于第一种情况，我找到了一些解决方法（见评论），但仍然存在第二种情况。

如何立即通过适当的道具使其工作？