HTMLEditor

HTMLEditor.js

import React from 'react'
import {Editor} from 'react-draft-wysiwyg'
import {EditorState, ContentState, convertFromHTML} from 'draft-js'
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'
import draftToHtml from 'draftjs-to-html'
import UploadImage from '../../editor/uploadImage'

export default class Main extends React.Component {

  static propTypes = {
    companyName: React.PropTypes.string,
    editCompany: React.PropTypes.func,
    pathToRedirect: React.PropTypes.string,
    content: React.PropTypes.string,
    onChange: React.PropTypes.func
  }

  getContentState () {
    let html = this.props.content
    if (!html) {
      // html = `<p>No hay contenido todavía!</p>`
      html = ''
    }
    const blocksFromHTML = convertFromHTML(html)
    const dbState = ContentState.createFromBlockArray(
      blocksFromHTML.contentBlocks,
      blocksFromHTML.entityMap
    )
    return dbState
  }

  state = {
    editorState: EditorState.createWithContent(this.getContentState()),
    htmlContent: null
  }

  onChange = (contentState) => {
    console.log('onChange', draftToHtml(contentState))
    this.setState({
      htmlContent: draftToHtml(contentState)
    })
    this.props.onChange(draftToHtml(contentState))
  }

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

  render () {
    return (
      <div>
        <div className='row'>
          <div className='col-xs-12 col-sm-12 col-lg-12 generalVentureCard'>
            <div>
              <Editor
                editorState={this.state.editorState}
                onEditorStateChange={this.onEditorStateChange}
                onContentStateChange={this.onChange}
                toolbar={{image: {uploadCallback: UploadImage}}} />
            </div>
          </div>
        </div>
      </div>
    )
  }

}