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

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

0 голосов
/ 05 июня 2019

Мне нужно около 6 текстовых редакторов для разных полей, чтобы пользователь мог изменять текст как жирный, курсив, подчеркивание, добавлять к нему изображения. Мне нужно отправлять данные в виде простого HTML в БД и получать данные в том же формате. Я использую response-draft-wysiwyg, для преобразования draft-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 не является функцией

...