r0nd_react-ckeditor-component/lib/ckeditor.js

CKEditor component for React

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _reactDom = require('react-dom');

var _reactDom2 = _interopRequireDefault(_reactDom);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var loadScript = require('load-script');

var defaultScriptUrl = 'https://cdn.ckeditor.com/4.6.2/standard/ckeditor.js';

/**
 * @author codeslayer1
 * @description CKEditor component to render a CKEditor textarea with defined configs and all CKEditor events handler
 */

var CKEditor = function (_React$Component) {
  _inherits(CKEditor, _React$Component);

  function CKEditor(props) {
    _classCallCheck(this, CKEditor);

    //Bindings
    var _this = _possibleConstructorReturn(this, (CKEditor.__proto__ || Object.getPrototypeOf(CKEditor)).call(this, props));

    _this.onLoad = _this.onLoad.bind(_this);
    _this.registerEventHandlers = _this.registerEventHandlers.bind(_this);

    //State initialization
    _this.state = {
      isScriptLoaded: _this.props.isScriptLoaded,
      config: _this.props.config
    };
    return _this;
  }

  //load ckeditor script as soon as component mounts if not already loaded


  _createClass(CKEditor, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      if (!this.props.isScriptLoaded) {
        loadScript(this.props.scriptUrl, this.onLoad);
      } else {
        this.onLoad();
      }
    }
  }, {
    key: 'componentWillUnmount',
    value: function componentWillUnmount() {
      this.unmounting = true;
      if (this.editorInstance) {
        this.editorInstance.removeAllListeners();
        window.CKEDITOR.remove(this.editorInstance);
      }
    }
  }, {
    key: 'onLoad',
    value: function onLoad() {
      if (this.unmounting) return;

      this.setState({
        isScriptLoaded: true
      });

      if (!window.CKEDITOR) {
        console.error('CKEditor not found');
        return;
      }

      this.editorInstance = window.CKEDITOR.appendTo(_reactDom2.default.findDOMNode(this), this.state.config, this.props.content);

      //Register listener for change event.
      //PS - This prop is now deprecated since change event can now be directly listened via events prop.
      /*
      ******** DEPRECATED ********
      this.editorInstance.on("change", () => {
        const content = this.editorInstance.getData();
          //call onChange callback if present
        if(this.props.onChange){
          this.props.onChange(content);
        }
      });
      */

      this.registerEventHandlers(this.props.events);
    }
  }, {
    key: 'registerEventHandlers',
    value: function registerEventHandlers(events, prevEvents) {
      prevEvents = prevEvents || {};

      //Register listener for custom events if any
      for (var event in events) {
        if (events[event] !== prevEvents[event]) {
          var prevEventHandler = prevEvents[event];
          if (prevEventHandler) this.editorInstance.removeListener(event, prevEventHandler);

          var eventHandler = events[event];
          this.editorInstance.on(event, eventHandler);
        }
      }
    }
  }, {
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      if (this.editorInstance) this.registerEventHandlers(nextProps.events, this.props.events);
    }
  }, {
    key: 'render',
    value: function render() {
      return _react2.default.createElement('div', { className: this.props.activeClass });
    }
  }]);

  return CKEditor;
}(_react2.default.Component);

CKEditor.defaultProps = {
  content: '',
  config: {},
  isScriptLoaded: false,
  scriptUrl: defaultScriptUrl,
  activeClass: '',
  events: {}
};

CKEditor.propTypes = {
  content: _propTypes2.default.any,
  config: _propTypes2.default.object,
  isScriptLoaded: _propTypes2.default.bool,
  scriptUrl: _propTypes2.default.string,
  activeClass: _propTypes2.default.string,
  events: _propTypes2.default.object
};

exports.default = CKEditor;