update ckeditor when prop changes

example/example.js

@@ -10,17 +10,16 @@ class Example extends React.Component {
     this.state = {
       content: "Hello World"
     };
-
-    //setInterval(this.setContent.bind(this), 1000)
+    this.setContent = this.setContent.bind(this)
   }
 
   //------ Test for race condition ------ //
-  // setContent(){
-  //   console.log("Setting content");
-  //   this.setState({
-  //     content: "Hello World " + Math.random()
-  //   })
-  // }
+  setContent(){
+    console.log("Setting content");
+    this.setState({
+      content: "Hello World " + Math.random()
+    })
+  }
 
   onChange(evt){
     console.log("onChange fired with event info: ",evt, "and data: ",evt.editor.getData());
@@ -36,14 +35,17 @@ class Example extends React.Component {
 
   render() {
     return (
-      <CKEditor
-        content={this.state.content}
-        events={{
-          blur: this.onBlur,
-          afterPaste: this.afterPaste,
-          change: this.onChange
-        }}
-      />
+      <div>
+        <button onClick={() => this.setContent()} children='Set content' />
+        <CKEditor
+          content={this.state.content}
+          events={{
+            blur: this.onBlur,
+            afterPaste: this.afterPaste,
+            change: this.onChange
+          }}
+        />
+      </div>
     );
   }
 }

src/ckeditor.js

@@ -1,9 +1,9 @@
-import React from "react";
-import PropTypes from "prop-types";
-import ReactDOM from "react-dom";
+import React from 'react';
+import PropTypes from 'prop-types';
+import ReactDOM from 'react-dom';
 const loadScript = require('load-script');
 
-var defaultScriptUrl = "https://cdn.ckeditor.com/4.6.2/standard/ckeditor.js";
+var defaultScriptUrl = 'https://cdn.ckeditor.com/4.6.2/standard/ckeditor.js';
 
 /**
  * @author codeslayer1
@@ -18,20 +18,26 @@ class CKEditor extends React.Component {
 
     //State initialization
     this.state = {
-      isScriptLoaded: this.props.isScriptLoaded,
-      config: this.props.config
+      isScriptLoaded: props.isScriptLoaded
     };
   }
 
   //load ckeditor script as soon as component mounts if not already loaded
   componentDidMount() {
-    if(!this.props.isScriptLoaded){
+    if (!this.state.isScriptLoaded) {
       loadScript(this.props.scriptUrl, this.onLoad);
-    }else{
+    } else {
       this.onLoad();
     }
   }
 
+  componentWillReceiveProps(props) {
+    const editor = this.editorInstance;
+    if (editor && editor.getData() !== props.content) {
+      editor.setData(props.content);
+    }
+  }
+
   componentWillUnmount() {
     this.unmounting = true;
   }
@@ -44,18 +50,18 @@ class CKEditor extends React.Component {
     });
 
     if (!window.CKEDITOR) {
-      console.error("CKEditor not found");
+      console.error('CKEditor not found');
       return;
     }
 
     this.editorInstance = window.CKEDITOR.appendTo(
       ReactDOM.findDOMNode(this),
-      this.state.config,
+      this.props.config,
       this.props.content
     );
 
     //Register listener for custom events if any
-    for(var event in this.props.events){
+    for (var event in this.props.events) {
       var eventHandler = this.props.events[event];
 
       this.editorInstance.on(event, eventHandler);
@@ -68,11 +74,11 @@ class CKEditor extends React.Component {
 }
 
 CKEditor.defaultProps = {
-  content: "",
+  content: '',
   config: {},
   isScriptLoaded: false,
   scriptUrl: defaultScriptUrl,
-  activeClass: "",
+  activeClass: '',
   events: {}
 };