[fixed] tinymce.4.2.7.min.js Uncaught TypeError: Cannot read property…

… body

[fixed] use the latest handler passed in by the props
[Added] reset props which excepts a number ( any number ) and reset editor if its different from previous prop, this is necessary evil to prevent editor from reseting everytime

lib/components/TinyMCE.js

@@ -35,7 +35,8 @@ const TinyMCE = React.createClass({
     config: React.PropTypes.object,
     content: React.PropTypes.string,
     id: React.PropTypes.string,
-    className: React.PropTypes.string
+    className: React.PropTypes.string,
+    reset: React.PropTypes.number
   },
 
   getDefaultProps() {
@@ -55,8 +56,9 @@ const TinyMCE = React.createClass({
     this._init(config, content, this.id);
   },
   _getPropData(props) {
-    const {content, ...partialprops} = props;
+    const {content, config, ...partialprops} = props;
     this.content = content;
+    this.config1 = config;
     return partialprops;
   },
   componentWillReceiveProps(nextProps) {
@@ -66,9 +68,12 @@ const TinyMCE = React.createClass({
   },
 
   shouldComponentUpdate(nextProps) {
+    if (isEqual(this._getPropData(nextProps), this._getPropData(this.props) ) &&
+      this.props.content !== nextProps.content && (this._isInit !== undefined && this._isInit === true)) {
+      this.editor.setContent(nextProps.content);
+    }
     return (
-      !isEqual(this.props.content, nextProps.content) ||
-      !isEqual(this.props.config, nextProps.config)
+      !isEqual(this._getPropData(nextProps), this._getPropData(this.props))
     );
   },
 
@@ -93,53 +98,44 @@ const TinyMCE = React.createClass({
   },
 
   _init(config, content, id) {
-    if (this._isInit) {
-      this._remove(this.id);
-    }
-    this.id = id;
-    // hide the textarea that is me so that no one sees it
-    if (document.getElementById(this.id)) {
-      document.getElementById(this.id).style.hidden = 'hidden';
-    }
-
-    const setupCallback = config.setup;
-    const hasSetupCallback = (typeof setupCallback === 'function');
-
-    config.selector = '#' + this.id;
-    config.setup = (editor) => {
-      EVENTS.forEach((event, index) => {
-        const handler = this.props[HANDLER_NAMES[index]];
-        if (typeof handler !== 'function') return;
-        editor.on(event, (e) => {
-          // native DOM events don't have access to the editor so we pass it here
-          handler(e, editor);
-        });
-      });
-      // need to set content here because the textarea will still have the
-      // old `this.props.content`
-      if (content) {
-        editor.on('init', () => {
-        //  setTimeout(()=>{
-          editor.setContent(content);
-        //  }, 100);
+    setTimeout(()=>{
+      const oldId = this.id;
+      this.id = id;
+
+      const setupCallback = config.setup;
+      const hasSetupCallback = (typeof setupCallback === 'function');
+      config.selector = '#' + this.id;
+      config.setup = (editor) => {
+        this.editor = editor;
+        EVENTS.forEach((event, index) => {
+          const handler = this.props[HANDLER_NAMES[index]];
+          if (typeof handler !== 'function') return;
+          editor.on(event, (e) => {
+            // native DOM events don't have access to the editor so we pass it here
+            handler(e, editor);
+          });
         });
+        // need to set content here because the textarea will still have the
+        // old `this.props.content`
+        if (content) {
+          editor.on('init', () => {
+            editor.setContent(content);
+          });
+        }
+        if (hasSetupCallback) {
+          setupCallback(editor);
+        }
+      };
+      if (this._isInit) {
+        this._remove(oldId);
       }
-      if (hasSetupCallback) {
-        setupCallback(editor);
-      }
-    };
-
-    tinymce.init(config);
-
-    if (document.getElementById(this.id)) {
-      document.getElementById(this.id).style.hidden = '';
-    }
-
-    this._isInit = true;
+      tinymce.init(config);
+      this._isInit = true;
+    }, 5);
   },
 
   _remove(id) {
-    tinymce.EditorManager.execCommand('mceRemoveControl', true, id);
+    tinymce.EditorManager.execCommand('mceRemoveEditor', false, id);
     this._isInit = false;
   }
 });

package.json

@@ -35,4 +35,4 @@
   "dependencies": {
     "lodash": "^3.9.3"
   }
-}
+}