The modification of react-tinymce component for webpack

editor.jsx

// Dependencies
import _ from 'lodash'

// React
import React from 'react'
import PropTypes from 'prop-types'

// TinyMCE
import tinymce from 'tinymce/tinymce'
import 'tinymce/themes/modern/theme'

const EVENTS = ['click', 'dblclick', 'mousedown', 'mouseup', 'mousemove', 'mouseover', 'mouseout', 'mouseenter', 'mouseleave', 'keydown', 'keypress', 'keyup', 'contextmenu', 'paste', 'init', 'focus', 'blur', 'BeforeSetContent', 'SetContent', 'GetContent', 'PreProcess', 'PostProcess', 'NodeChange', 'Undo', 'Redo', 'Change', 'Dirty', 'Remove', 'ExecCommand', 'PastePreProcess', 'PastePostProcess']

/**
 * Generate unique hash
 * @param {Number} length
 * @return {String}
 */
const uid = function(length = 5) {
  return Math.random().toString(36).substr(2, length)
}

class Editor extends React.Component {
  constructor(props) {
    super(props)

    // Default fields
    this.id     = uid()
    this.inited = false

    // Binding
    this.initEditor   = this.initEditor.bind(this)
    this.removeEditor = this.removeEditor.bind(this)
  }

  // Initialize TinyMCE on component mount event
  componentDidMount() {
    this.initEditor(this.props.config, this.props.content)
  }

  // Component will be reinit when received new config
  componentWillReceiveProps(nextProps) {
    if (!_.isEqual(nextProps, this.props)) {
      this.initEditor(nextProps.config, nextProps.content)
    }
  }

  // Component will be update when received new props
  shouldComponentUpdate(nextProps) {
    return (
      this.props.content != nextProps.content ||
      this.props.config  != nextProps.config
    )
  }

  // Remove editor when unmount component
  componentWillUnmount() {
    this.removeEditor()
  }

  /**
   * Initialize TinyMCE Editor
   * @param {Object} config
   * @param {String} content
   */
  initEditor(config, content) {
    if (this.inited) {
      this.removeEditor()
    }

    config.selector = '#' + this.id
    config.skin     = false
    config.language = false
    config.setup    = editor => {
      EVENTS.forEach(event => {
        var handler = this.props['on' + _.upperFirst(event)]

        console.info(handler)

        if (typeof(handler) !== 'function') return

        editor.on(event, e => handler(e, editor))
      })

      editor.on('init', () => {
        editor.setContent(content)
      })
    }

    tinymce.init(config)

    this.inited = true
  }

  /**
   * Remove TinyMCE Editor
   */
  removeEditor() {
    tinymce.remove('#' + this.id)

    this.inited = false
  }

  render() {
    return this.props.config.inline ? (
      <div
        id={this.id}
        className="editor inline"
        dangerouslySetInnerHTML={this.props.content}
      />
    ) : (
      <div className="editor full">
        <textarea
          id={this.id}
          defaultValue={this.props.content}
          >
        </textarea>
      </div>
    )
  }
}

// Props settings
Editor.propTypes = {
  content: PropTypes.string,
  config: PropTypes.object
}
Editor.defaultProps = {
  content: '',
  config: {}
}

export default Editor