Problem loading text in react-draft-wysiwyg editor

Question

In my project I have integrated the editor from react-draft-wysiwyg. Now I need to test the text editor by loading it with some text data. I tried to follow the documentation and my code currently looks like this:

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>
        )
    }
}

I tried to follow the documentation but the json isn't loading. I tried to understand the workarounds but couldn't as I have never used DraftJS before. Can anyone help me with this?

What does it say in the console? I haven't seen anything like onContentStateChange = Function = (contentState) => { ... } before. It seems that you have a bunch of basic React related errors. Try taking a look at some of the many Draft.js codepens out there, such as codepen.io/Kiwka/pen/YNYvyG. — mzedeler
– mzedeler, Commented May 5, 2020 at 9:54
onContentStateChange = Function = (contentState) => { ... } it says right in the documentation. (under the section data conversion) — Proteeti Prova
– Proteeti Prova, Commented May 5, 2020 at 10:07
It was a typo, I replaced the line check it. still not working — Proteeti Prova
– Proteeti Prova, Commented May 7, 2020 at 7:55
It seems that @oozywaters has provided an answer for you, but in the future, please remember to include the error message if you experience an error. — mzedeler
– mzedeler, Commented May 7, 2020 at 15:07

oozywaters · Accepted Answer · 2020-05-07 15:17:37Z

You have to use EditorState.createWithContent to create an editor state based on your content data and pass it to the Editor component, like this:

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>
        );
    }
}

You can check out a live example over here

Collectives™ on Stack Overflow

Problem loading text in react-draft-wysiwyg editor

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related