问题标签 [draftjs]

我已经使用 convertToRaw 将内容保存到数据库中，我试图将其加载回 draft.js 编辑器，以使用户能够重新编辑内容。

Draft.js 编辑器包含在基于react-modal的组件中，当用户在内容上单击“编辑”时会显示该组件。这很重要，因为模态（和编辑器）没有重新实例化，它们只是显示和隐藏。

编辑器在（ES6）类构造函数中启动一次，只需使用：

当用户单击“编辑”时，我从数据库加载原始内容，然后我尝试使用以下多种变体将原始内容加载到编辑器中：

但是，虽然 newEditorState 清楚地包含正确的内容，但this.setState({editorState: newEditorState})似乎对组件（或编辑器）的状态完全没有影响。

我如何为编辑器设置新状态？谢谢！

更新 在进一步调查中，很明显只是this.setState({editorState: newEditorState})编辑器组件失败了。

我通过设置测试状态属性并成功更新它来测试它，而 editorState 保持不变。

为了完全测试这一点，在我的构造函数中，我使用测试值初始化了状态：

然后我编写了一些测试代码来展示 setState 如何适用于我的测试值，但不适用于 Draft.js 编辑器状态：

控制台输出如下所示：

我看不出为什么在 testVal 时没有更新 draft.js editorState？

我正在尝试将 Draft.js 编辑器集成到项目中。我正在考虑使用它的方式是在每次渲染调用时从我自己的状态中创建一个新的 EditorState（这种方法的原因与我的特定上下文有关，我不打算在这里详细说明）。

我没有成功的是在编辑器中设置光标位置。

我在 Codepen 上创建了一个示例： http ://codepen.io/nutrina/pen/JKaaOo?editors=0011

在此示例中，我键入的任何字符都被添加到文本的开头，而不是插入到光标位置。我尝试使用以下方法设置光标：

但没有太大的成功。任何帮助，将不胜感激。

谢谢，杰拉德

我在 editorState 上做了一些棘手的状态突变，我失去了选择。

我需要获取 currentText()，使用一些魔术库转换为 HTML 并将其转换回 editorState。这很好用，只是选择太难了。

现在，我试图在第一次开始时进行选择，然后执行 a forceSelection，但失败并出现一些与selection.hasFocus()（似乎并不真正相关......）相关的错误。

我猜我需要根据锚点和偏移量计算“新”选择，但不太确定，有什么想法吗？

现在我的代码看起来像：

是一个 hack，我知道我只是在玩 DraftJS 如果我能做到这一点，如果我让它工作顺利，我肯定会使用装饰器在 editorState 中添加 HTML。

谢谢你的时间！

现在我制作markdown荧光笔。

高亮内联并不难。我使用 CompositeDecorator 来重写文本。https://facebook.github.io/draft-js/docs/advanced-topics-decorators.html

但我不能使用多行语法（例如，代码块）。默认情况下，换行符成为下一个块，装饰器由块到块处理。

下图是我的实现示例。我无法装饰代码块语法。

如何在 Draft-js 上制作多行荧光笔？

我正在尝试使用 facebook 的Draft-JS框架实现一个编辑器，该框架将限制为 50 个字符行。

我不希望这些行使用 css 中断，我希望它们在达到 50 个字符的限制时真正分成单独的块。

换行应该发生在超过第 50 个字符的单词之前的最后一个空格处（类似于word-wrap: break-word在 css 中）。

当然，我需要选择留在新行的末尾。

我不知道从哪里开始。有任何想法吗？

• 我创建了一个草稿 js 代码笔，其中包含当前 editorState 的预览以便于开始，只是不确定从哪里开始：https ://codepen.io/adamtal/pen/pbqVrL?editors=0010

更新： 作为对Jiang YD答案的回应，我认为从块末尾获取文本并用它创建一个新块不是一个好主意。不确定格式状态将保持多好。我认为解决方案应该使用Modifier.splitBlock并进行一些选择操作。

我使用了 draft-js-export-html npm 并将 html 保存到我的数据库中，如下所述。

我点击了这个链接并使用 npm draft-js-import将 html 导入到带有 draftjs 的编辑器内容。如果我的 html 不包含任何图像，我可以使用 html 初始化内容，但如果它包含<img>标签，我将无法导入 html。

因为它正在产生错误

我也尝试了这个链接，也使用了 convertFromHtml但仍然无法用<img>标签初始化编辑器

提前致谢

我按照draft-js 文档创建了一个非常简单的draft-js 演示。

一切似乎都很好，但是当我在 Chrome 中打开 url 时，我只能看到一个白色的空白页面（那里有一个隐藏的编辑器组件但不可见）

浏览器的控制台上没有错误。

演示项目在这里：https ://github.com/js-demos/react-draft-js-demo ，您可以克隆它并按照自述文件运行它。

我已经非常仔细地查看了代码，但不知道为什么。

嗨，我正在尝试在我的 reactJS 项目中使用 react-rte。我有服务器端渲染，每次我想使用这个包时，我都会得到：

我想问题可能出在同构工具上，但我不知道如何将包导入到已经定义窗口的客户端。

是否有文档解释了在将内容粘贴到 draft.js 时如何保留分段符？其他格式看起来很合理，但粘贴时所有段落块都折叠成单个段落块。

我已经在一个项目中将 Draft JS 实现为一个简单的编辑器，但是我在设置无序列表的样式时遇到了问题，特别是更改了项目符号的颜色以匹配文本颜色。

文档中似乎没有关于如何将样式应用于li包装unordered-list-item项目的信息。我可以选择文本并应用颜色，但这会产生如下编辑器状态：

有没有人有经验/可以指出如何为子弹添加颜色的方向？

更新

经过一番调查并一遍又一遍地阅读文档后，我能够通过添加自定义blockStyleFn并将自定义类添加到li块中来达到预期的结果：

这也需要为块编写额外的 css 类以匹配颜色块的样式（例如.block-style-yellow { color: rgb(180, 180, 0, 1.0) }）。

此小提琴中提供了此工作的示例