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

Question

在我的项目中，我集成了react draft wysiwyg中的编辑器。现在我需要通过加载一些文本数据来测试文本编辑器。我试着遵循文档，我的代码目前看起来是这样的：

import React, { Component } from 'react';
import { Editor } from 'react-draft-wysiwyg';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
import './textEditor.css';
import { convertFromRaw } from 'draft-js';

const content = {
"entityMap":{
},
"blocks":[
{
"key":"637gr",
"text":"Initialized from content state.",
"type":"unstyled",
"depth":0,
"inlineStyleRanges":[
],
"entityRanges":[
],
"data":{
}
}
]
};
export default class RichTextEditor extends Component {
constructor(props) {
super(props);
const contentState = convertFromRaw(content);
this.state = {
contentState,
}
}
onContentStateChange: Function =  (contentState) => {
this.setState({
contentState,
});
}; 
render() {
const { contentState } = this.state;
return (
<div>
<Editor
editorClassName={"report-editor"}
editorState={this.props.editorState}
onEditorStateChange={this.props.onEditorStateChange}
onContentStateChange={this.props.onContentStateChange}
/>
</div>
)
}
}

我试图遵循文档，但json没有加载。我试着理解变通方法，但无法理解，因为我以前从未使用过DraftJS。有人能帮我吗？

Answer 1

您必须使用EditorState.createWithContent根据内容数据创建编辑器状态，并将其传递给Editor组件，如下所示：

import React, { Component } from 'react';
import { Editor } from 'react-draft-wysiwyg';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
import './textEditor.css';
import { convertFromRaw, EditorState } from 'draft-js';
const content = { ... };
export default class RichTextEditor extends Component {
constructor(props) {
super(props);
const contentState = convertFromRaw(content);
const editorState = EditorState.createWithContent(contentState);
this.state = {
contentState,
editorState,
};
}
render() {
const { editorState } = this.state;
return (
<div>
<Editor
editorClassName={"report-editor"}
editorState={editorState}
onEditorStateChange={this.props.onEditorStateChange}
onContentStateChange={this.props.onContentStateChange}
/>
</div>
);
}
}

你可以在这里查看一个真实的例子