如何使用 draft-js-html 将 draft.js 输出转换为纯 html 代码答案

【问题标题】：How to convert the draft.js output to plain html code using draft-js-html如何使用 draft-js-html 将 draft.js 输出转换为纯 html 代码
【发布时间】：2019-06-05 05:58:08
【问题描述】：

我需要为不同的字段设置大约 6 个文本编辑器，以便用户可以将文本修改为粗体、斜体、下划线、添加图像。我需要将数据作为纯 HTML 发送到 db 并接收数据格式相同。我使用 react-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 is not a function 的错误

【问题讨论】：

标签： reactjs draftjs react-draft-wysiwyg

【解决方案1】：

在第一次加载时，您肯定会遇到问题，因为您的 this.state.aboutus 是一个字符串。你无法阅读''.editorStateLabel1。字符串在 javascript 中没有属性。

在第二次加载时，您的 this.state.aboutus.editorStateLabel1 不是实际的 editorState，而是一个 HTML 字符串。要使 DraftEditor 工作，您需要使用 EditorState api。只有在需要发送到 DB 的最后一刻才转换为 HTML。 Draft.js 有自己的数据结构——它不接受 HTML 也不给出 HTML。在此处阅读文档：https://draftjs.org/docs/api-reference-content-state

【讨论】：