如何显示 DraftJS 编辑器的保存内容？答案

【问题标题】：How to display the saved content of a DraftJS editor?如何显示 DraftJS 编辑器的保存内容？
【发布时间】：2018-08-19 04:01:14
【问题描述】：

我实际上将 DraftJS 编辑器的 contentState 保存为字符串，使用：JSON.stringify(convertToRaw(editorState.getCurrentContent()))

我的问题是：如何将其显示回来，例如作为帖子。我在想我还是应该用 DraftJS 把它显示回来，因为只有 DraftJS 可以自然地解析 convertFromRaw(JSON.parse(...)) 的结果。

问题是链接实体例如在编辑器中不可点击，当我浏览EditorState 和ContentState 的API 时，我看不到viewMode 之类的东西，或类似的东西，所以我很困惑。

请帮忙。

【问题讨论】：

标签： javascript draftjs

【解决方案1】：

我刚刚看到draft-js-export-html，正是我想要的。

【讨论】：

【解决方案2】：

您可以通过执行以下操作来显示 rawContent：

import { Editor} from 'draft-js';

export default class ShowContent extends React.Component {
  constructor(props){
    this.state = { editorState: convertFromRaw(JSON.parse(...))};
  }

  render(){
    return <Editor editorState={this.state.editorState} readOnly />
  }
}

您对viewMode 属性的假设是正确的。它是您从 Draft 导入的 Editor 组件上的“readOnly”属性。

【讨论】：

非常感谢迈克的回复。
对于将来到达这里的任何人：除了readOnly 道具，还有一个blockStyleFn（函数）道具可用于设置块的样式。根据要呈现的内容类型，您可以return 适当的类名来设置它的样式（典型用例：文本对齐）。参考：draftjs.org/docs/api-reference-editor/#blockstylefn