How to convert the draft.js output to plain html code using draft-js-html

Question

I need to have around 6 text-editors for different fields so that the user can modify the text as bold, italic, underline, add images to it.I need to send the data as a plain HTML to db and receive data in the same format.I'm using react-draft-wysiwyg, for conversion draft-js-html. Please help me with that

  import React, { Component } from 'react';
  import { Editor } from 'react-draft-wysiwyg';
  import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
  import draftToHtml from 'draftjs-to-html';
  import { EditorState, convertToRaw} from 'draft-js';

  class Aboutus extends Component {
   constructor(props) {
   super(props);
    this.state = {
      editorStateLabel1: EditorState.createEmpty(),
      editorStateLabel2: EditorState.createEmpty(),
      aboutus:'',
      inProgress: false,
      uploadedImages:[],
     };
     this.onEditorStateChange = this.onEditorStateChange.bind(this);
     this.uploadCallback = this.uploadCallback.bind(this);
    }

    uploadCallback(file){
    let uploadedImages = this.state.uploadedImages
     const imageObject = {
     file: file,
     localSrc: URL.createObjectURL(file),
     }
    uploadedImages.push(imageObject);
    this.setState(uploadedImages:uploadedImages)
    return new Promise(
    (resolve, reject) => {
    resolve({ data: { link: imageObject.localSrc } });
    }
   );
   } 

     onEditorStateChange(type, editorState) {
       var aboutus = {};
       aboutus[type] = 
       draftToHtml(convertToRaw(editorState.getCurrentContent()))
       this.setState({
         aboutus
        });
       }

  render() {
    return (
     <div>
        <h4>label-1</h4>
         <Editor
           toolbar={{ image: { uploadCallback: this.uploadCallback 
            }}}
          editorState={this.state.aboutus.editorStateLabel1}
          onEditorStateChange={this.onEditorStateChange.bind(this, 
           'editorStateLabel1')}
        />
      </Col>
    </Row>
    <Row>
      <Col md={18}>
      <h4>label-2</h4>
        <Editor
          toolbar={{ image: { uploadCallback: this.uploadCallback 
            }}}
          editorState={this.state.aboutus.editorStateLabel2}
          onEditorStateChange={this.onEditorStateChange.bind(this, 
           'editorStateLabel2')}
        />
         </Col>
        </Row>
      </div>
      );
    }
  }
 export default Aboutus;

I am getting an error like Uncaught Type Error: editorState.getImmutable is not a function

jf1234 jf1234 · Accepted Answer · 2019-07-25T16:52:29

Well on first load, you're definitely going to have issues because your this.state.aboutus is a string. You can't read ''.editorStateLabel1. Strings don't have properties in javascript.

On second load, your this.state.aboutus.editorStateLabel1 is not an actual editorState but is an HTML string. For the DraftEditor to work you need to use the EditorState api. You only convert to HTML at the very last minute when you need to send to DB. Draft.js has its own data structure-- it doesn't take in HTML or give out HTML. Read the docs here: https://draftjs.org/docs/api-reference-content-state

How to convert the draft.js output to plain html code using draft-js-html

1 Answers