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

【问题标题】：Problem loading text in react-draft-wysiwyg editor在 react-draft-wysiwyg 编辑器中加载文本时出现问题
【发布时间】：2020-05-05 09:18:21
【问题描述】：

在我的项目中，我集成了 react-draft-wysiwyg 中的编辑器。现在我需要通过加载一些文本数据来测试文本编辑器。我尝试关注documentation，我的代码目前如下所示：

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，所以无法理解。谁能帮我这个？

【问题讨论】：

控制台中的内容是什么？我以前从未见过像onContentStateChange = Function = (contentState) => { ... } 这样的东西。似乎你有一堆基本的 React 相关错误。尝试查看其中的许多 Draft.js 代码笔，例如 codepen.io/Kiwka/pen/YNYvyG。
onContentStateChange = Function = (contentState) => { ... } 它在文档中说得对。（在数据转换部分下）
你能提供一个链接吗？
这是一个错字，我替换了行检查它。还是不行
看来@oozywaters 已经为您提供了答案，但以后遇到错误请记得附上错误信息。

标签： reactjs react-native draftjs react-draft-wysiwyg

【解决方案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>
        );
    }
}

您可以通过here查看现场示例

【讨论】：

谢谢，我花了 3 个小时才找到这个！