当它的 readOnly 属性为真时，如何在 Draft.js 编辑器中将自定义渲染块设为只读？

Question

我正在使用 Draft.js Editor 组件。我有一个通过 blockRendererFn 属性正确指定的自定义块渲染器。该组件按照 Draft documentation 中的建议呈现从 draft-js 导入的 EditorBlock。在我的自定义块渲染器中获得的道具中，我不知道该块是否是只读的。至少默认情况下不是。我可以通过 blockProps 获得它，但我觉得我遗漏了一些东西。就像它在使用 EditorBlock 时应该自然工作一样。就像它可以从上下文或其他东西中获取 readOnly 值。

当 readOnly 为 true 时，我是否有责任在没有 EditorBlock 的情况下渲染我的块？我有责任通过 blockProps?

将 readOnly 值传播到我的自定义块渲染器

Answer 1

好吧，我在 slack draftjs 团队得到了这个答案，所以我要在这里总结一下：

将 readOnly 设置为 true 应该足以防止整个编辑器中的任何 onChange 回调。我的问题是一种错误，我在从 blockRendererFn 返回的自定义块渲染器中将 editable 设置为 true。这导致 readOnly 标志被覆盖，从而允许在我的自定义块中进行更改。 Isaac 将此标记为可能不需要的行为。

我的解决方案是不在自定义块渲染器上指定我的块是否可编辑。这样 readOnly 就会得到适当的考虑，我无需再做任何事情。

Answer 2

将 readOnly={readOnly} 传递给编辑器修复了一个问题。

<Editor
  readOnly={readOnly}
/>

当它的 readOnly 属性为真时，如何在 Draft.js 编辑器中将自定义渲染块设为只读？

How can I make custom rendered block readonly in Draft.js editor when its readOnly prop is true?

javascript

reactjs

draftjs