Skip to content

Instantly share code, notes, and snippets.

@pbrocks
Created Nov 15, 2018
Embed
What would you like to do?
The modification of react-tinymce component for webpack
// 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment