Как преобразовать вывод draft.js в простой HTML-код, используя draft-js-html

Question

Мне нужно около 6 текстовых редакторов для разных полей, чтобы пользователь мог изменять текст как жирный, курсив, подчеркивание, добавлять изображения к нему. Мне нужно отправлять данные в виде обычного HTML в БД и получать данные в том же виде формат. Я использую реагировать-черновик-wysiwyg, для преобразования черновик-js-html. Пожалуйста, помогите мне с этим

  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;

Я получаю сообщение об ошибке типа Uncaught Type Error: editorState.getImmutable не является функцией

Answer 1

Ну при первой загрузке у вас точно будут проблемы, потому что ваши this.state.aboutus это строка Ты не умеешь читать ''.editorStateLabel1, Строки не имеют свойств в JavaScript.

При второй загрузке ваш this.state.aboutus.editorStateLabel1 не является действительным editorState, но является строкой HTML. Для работы DraftEditor вам нужно использовать API EditorState. Вы конвертируете в HTML только в последнюю минуту, когда вам нужно отправить в БД. Draft.js имеет свою собственную структуру данных - он не принимает HTML и не выдает HTML. Прочитайте документы здесь: https://draftjs.org/docs/api-reference-content-state