2

在我的项目中，我集成了来自 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，所以无法理解。谁能帮我这个？

4

1 回答 1

3

您必须使用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>
        );
    }
}

你可以在这里查看一个活生生的例子

于 2020-05-07T09:58:50.463 回答