0

我需要为不同的字段提供大约 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 的错误

4

1 回答 1

0

那么在第一次加载时，你肯定会遇到问题，因为你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

于 2019-07-25T16:52:29.500 回答