myEditor-2.js

import React, { Component } from 'react';
import { EditorState } from 'draft-js';
import { Editor } from 'react-draft-wysiwyg';

class MyEditor extends Component {
  constructor(props) {
    super(props);
    this.state = {
      editorState: EditorState.createEmpty()
    };
  }

  onEditorStateChange = editorState => {
    this.setState({
      editorState
    });
  };

  render() {
    const { editorState } = this.state;

    return (
      <div>
        <Editor
          editorState={editorState}
          wrapperClassName="rich-editor demo-wrapper"
          editorClassName="demo-editor"
          onEditorStateChange={this.onEditorStateChange}
          placeholder="The message goes here..."
        />
        {/*new code: adding a bootstrap button and preview div, remember to remove these comments*/ }
        <h4>Underlying HTML</h4>
        <div className="html-view">
         ...
        </div>
        <button className="btn btn-success" data-toggle="modal" data-target="#previewModal">
          Preview message
        </button>
        {/* end of new code*/ }
      </div>
    );
  }
}

export { MyEditor };