joywok-material-components/lib/jweditor/extplugin.js

<h1 align="center"> Joywok Material Components </h1>

'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 _index = require('./index');

var _index2 = _interopRequireDefault(_index);

var _core = require('@material-ui/core');

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; } /**
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                * 
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                * @api {}   富文本编辑器
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                * @apiName  带自定义功能的富文本编辑器组件
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                * @apiGroup 组件使用
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                * 
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                * @apiParam {Object}    config      非必填，编辑器配置 { language: 'en', ..... }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                * @apiParam {Object}    value       非必填，内容默认值, 当此值为对象时， onChange中返回的也是此对象
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                * @apiParam {String}    value       非必填，内容默认值, 当此值为对象时， onChange中返回的是字符串
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                * @apiParam {Object}    varSetting  非必填，插件值
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                * @apiParam {function}  onChange    编辑器内容发生变化之后的回调事件，function({value: object||string, varSelected: Array, event: event})
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                * @apiSuccessExample {json} 使用案例:
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                * 
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               参数说明：
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               config 所有参数非必填 https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               config = {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 toolbarPosition: 'jwedtoolbar',     工具栏位置
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 autoGrow_maxHeight: 300, 自增最大高度
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 autoGrow_minHeight: 300, 自增最小高度
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 editorName: 'editor01',  编辑器名称，当一个页面中同时存在两个编辑器时需要区分
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 imageFormat: ['.jpg', '.png'],
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 audioFormat: ['.mp3'],
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 videoFormat: ['.mp4'],
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 ...
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               multilang = false
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               multilang = {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               	langs:[
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               		{lang: 'zh-cn', name:'中文'},
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               		{lang: 'en', name:'en'}
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               	],
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               	curLang: 'zh-cn'
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               value = {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   'zh-cn': 'awefaewawef',
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   'en': '1134567',
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               value = 'SQEEFEFEWFEF';
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               varSetting = false
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               varSetting = {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               	list:[
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               		{id:'1',name: {'zh-cn': '活动名称', en: 'awef', jan: '11111'} },
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               		{id:'2',name: {'zh-cn': '活动内容', en: 'awef', jan: '22222'} },
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 ],
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               	selected:[]
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               import FCKEditor from 'joywok-material-components/lib/jweditor/extplugin';
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               onChange({value: object||string, varSelected: Array, event: event}){
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               <FCKEditor onChange={(e)=>this.onChange(v)} config={config} value={value} multilang={multilang} varSetting={varSetting} />
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                *
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                * 
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                */

require('./style/index.css');

require('./crypto');

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

  _createClass(ExtPluginsEditor, [{
    key: 'initConfig',
    value: function initConfig() {
      var _this2 = this;

      var s = {
        editorName: 'JWCK' + this.guid(),
        editorConfig: this.props.config === undefined ? {} : this.props.config,
        showAudioDialog: false,
        showVideoDialog: false,
        showImageDialog: false,
        toolbarPosition: this.props.toolbarPosition || false,
        showLangs: this.props.showLangs === false ? false : true,
        varSetting: this.props.varSetting || false,
        value: '',
        curValue: '',
        curLang: '',
        varSelected: this.props.varSetting !== false && this.props.varSetting !== undefined && this.props.varSetting.selected ? this.props.varSetting.selected : []
      };
      if (_.isEmpty(s.editorConfig)) {
        s.editorConfig = { appType: '', appId: '' };
      }
      if (this.props.multilang) {
        if (_.isArray(this.props.multilang.langs)) {
          s.multilang = { langs: this.props.multilang.langs };
          if (_.isString(this.props.multilang.curLang)) {
            s.multilang.curLang = this.props.multilang.curLang;
            s.curLang = this.props.multilang.curLang;
          } else {
            s.multilang.curLang = s.multilang[0].lang;
            s.curLang = s.multilang[0].lang;
          }
        } else {
          s.multilang = false;
        }
      } else {
        s.multilang = false;
      }
      if (_.isString(this.props.value) === true) {
        s.curValue = this.props.value;
        s.value = this.props.value;
      } else if (_.isObject(this.props.value)) {
        s.value = {};
        _.each(s.multilang.langs, function (item) {
          s.value[item.lang] = _this2.props.value[item.lang] || '';
        });
        s.curValue = s.value[s.multilang.curLang] || '';
      } else {
        s.curValue = '';
        s.value = '';
      }
      if (this.props.varSetting) {
        if (_.isArray(this.props.varSetting.list)) {
          s.varSetting = {
            list: this.props.varSetting.list
          };
          if (_.isArray(this.props.varSetting.selected)) {
            s.varSetting.selected = this.props.varSetting.selected;
          } else {
            s.varSetting.selected = [];
          }
        } else {
          s.varSetting = false;
          s.varSelected = [];
        }
      } else {
        s.varSetting = false;
        s.varSelected = [];
      }
      if (s.varSetting !== false && s.toolbarPosition === false) {
        s.toolbarPosition = 'jwedtoolbar' + this.guid();
      }
      this.state = s;
    }
  }, {
    key: 'componentDidMount',
    value: function componentDidMount() {
      var s = {
        curValue: this.encodeValue(this.state.curValue),
        value: this.encodeValue(this.state.value)
      };
      this.setState(s);
    }
  }, {
    key: 'guid',
    value: function guid() {
      function S4() {
        return ((1 + Math.random()) * 0x10000 | 0).toString(16).substring(1);
      }
      return S4() + S4() + S4() + S4() + S4() + S4() + S4() + S4();
    }
  }]);

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

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

    _this.onChangeEditor = function (e) {
      var v = _this.state.value;
      if (_this.state.multilang === false) {
        v = e.editor.getData();
      } else {
        if (typeof v === 'string') v = {};
        v[_this.state.multilang.curLang] = e.editor.getData();
      }
      _this.setState({ value: v }, function () {
        _this.changeHandle();
      });
    };

    _this.changeLanguage = function (e) {
      var lang = _.clone(_this.state.multilang);
      lang.curLang = e.target.value;
      _this.changeHandle(lang);
      // this.setState({multilang: lang}, ()=>{
      //   this.changeHandle(lang);
      // });
    };

    _this.initConfig();
    return _this;
  }

  _createClass(ExtPluginsEditor, [{
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(d) {
      var _this3 = this;

      var setVal = {};
      var difVar = false;
      if (d.varSetting === undefined) d.varSetting = false;
      if (!_.isEqual(d.varSetting, this.state.varSetting)) {
        setVal.varSetting = d.varSetting;
        setVal.toolbarPosition = 'jwedtoolbar' + this.guid();
        if (d.varSetting && d.varSetting.list && d.varSetting.list.length > 0) {
          difVar = true;
        };
      }
      if (d.multilang === undefined) d.multilang = false;
      if (!_.isEqual(d.multilang, this.state.multilang)) {
        setVal.multilang = d.multilang;
        setVal.curValue = this.encodeValue(d.value[d.multilang.curLang], d.multilang.curLang);
        setVal.curLang = d.multilang.curLang;
      }
      if (!_.isEqual(d.value, this.state.value)) {
        setVal.value = d.value;
        if (d.multilang && d.multilang.curLang) {
          setVal.curValue = this.encodeValue(d.value[d.multilang.curLang], d.multilang.curLang);
        } else {
          setVal.curValue = d.value;
        }
      }
      if (d.multilang === false && this.state.multilang === false && d.value === '') {
        setVal.value = d.value;
        setVal.curValue = d.value;
      }
      if (Object.keys(setVal).length > 0) {
        this.setState(setVal, function () {
          if (difVar === true) _this3.decodeDiffValue();
        });
      }
    }
  }, {
    key: 'decodeDiffValue',
    value: function decodeDiffValue() {
      console.log('111');
      var _state = this.state,
          value = _state.value,
          curValue = _state.curValue;

      this.setState({ value: this.encodeValue(value), curValue: this.encodeValue(curValue) });
    }
  }, {
    key: 'render',
    value: function render() {
      var _this4 = this;

      var value = this.state.curValue || '';
      return _react2.default.createElement(
        'div',
        { className: 'joywok-editor-wrap', id: this.state.editorName },
        this.state.multilang === false ? '' : _react2.default.createElement(
          'div',
          { className: this.state.showLangs === true ? 'jwck-lang-bg' : 'jwck-lang-bg jwck-hide' },
          _react2.default.createElement(
            'div',
            { className: 'jwck-lang' },
            _react2.default.createElement(
              _core.Select,
              { inputProps: { name: 'language' }, value: this.state.multilang.curLang, onChange: this.changeLanguage },
              this.state.multilang.langs.map(function (item) {
                return _react2.default.createElement(
                  _core.MenuItem,
                  { value: item.lang },
                  item.name
                );
              })
            )
          )
        ),
        this.state.toolbarPosition === false ? '' : _react2.default.createElement(
          'div',
          { className: 'jwedtoolbar ' + this.state.toolbarPosition },
          _react2.default.createElement('div', null)
        ),
        this.state.varSetting === false ? '' : this.renderExtPluginsList(),
        _react2.default.createElement(_index2.default, { toolbarStyle: this.state.showLangs === true ? '' : 'jwedtoolbarborder', onRef: function onRef(ref) {
            _this4.$Child = ref;
          }, curLang: this.state.curLang, editorName: this.state.editorName, toolbarPosition: this.state.toolbarPosition, onChange: this.onChangeEditor, defaultValue: value, config: this.state.editorConfig })
      );
    }
  }, {
    key: 'encodeValue',
    value: function encodeValue(v, curLang) {
      var self = this;
      if (this.state === undefined || this.state.varSetting === undefined || this.state.varSetting === false) {
        return v;
      } else {
        if (typeof v === 'string') {
          _.each(this.state.varSetting.list, function (item) {
            var lang = curLang === undefined ? self.state.multilang.curLang : curLang;
            var name = item[lang];
            v = v.replace(eval('/(\\\{' + item.id + '\\\})/g'), '<div contenteditable="false" id="jwpl_' + item.id + '" class="jwck-plugin-item" >' + name + '<del>&nbsp;</del></div>');
          });
          return v;
        } else {
          _.each(v, function (val, key) {
            _.each(self.state.varSetting.list, function (item) {
              var lang = curLang === undefined ? self.state.multilang.curLang : curLang;
              var name = item[lang];
              v[key] = (val + '').replace(eval('/(\\\{' + item.id + '\\\})/g'), '<div contenteditable="false" id="jwpl_' + item.id + '" class="jwck-plugin-item">' + name + '<del>&nbsp;</del></div>');
            });
          });
          return v;
        }
      }
    }
  }, {
    key: 'decodeValue',
    value: function decodeValue(v) {
      if (this.state.varSetting === false) {
        return v;
      } else {
        if (typeof v === 'string') {
          v = v.replace(/<div contenteditable="false" id="jwpl_(.*?)" class="jwck-plugin-item">(.*?)<\/div>/ig, '{$1}');
        } else {
          _.each(v, function (val, key) {
            v[key] = (val + '').replace(/<div contenteditable="false" id="jwpl_(.*?)" class="jwck-plugin-item">(.*?)<\/div>/ig, '{$1}');
          });
        }
        return v;
      }
    }
  }, {
    key: 'selectPluginItem',
    value: function selectPluginItem(item, name) {
      this.$Child.insertItem('<div contenteditable="false" id="jwpl_' + item.id + '" class="jwck-plugin-item">' + name + '<del></del></div>');
    }
  }, {
    key: 'changeHandle',
    value: function changeHandle(lang) {
      var v = this.state.value;
      var varSelected = this.state.varSelected;
      v = this.decodeValue(v);
      var ret = { value: v, varSelected: varSelected };
      if (!_.isEmpty(lang)) {
        ret.multilang = lang;
        if (_.isEmpty(ret.value[lang.curLang])) {
          ret.value[lang.curLang] = '';
        }
      } else {
        if (this.state.multilang !== false) {
          ret.curLang = this.state.multilang.curLang;
          ret.multilang = this.state.multilang;
          if (_.isEmpty(ret.value[ret.curLang])) {
            ret.value[ret.curLang] = '';
          }
        }
      }
      typeof this.props.onChange === 'function' && this.props.onChange(ret);
    }
  }, {
    key: 'renderExtPluginsList',
    value: function renderExtPluginsList() {
      var self = this;
      return _react2.default.createElement(
        'div',
        { className: 'jwck-plugin-items' },
        _react2.default.createElement(
          'div',
          { className: 'jwck-plugin-items-w' },
          _.map(this.state.varSetting.list, function (item) {
            // let name = '';
            // if( self.state.multilang === false ){
            //   name = item.name;
            // }else{
            //   name = item.name[self.state.multilang.curLang] || ''
            // }
            var name = item[self.state.multilang.curLang] || '';
            // item.cname = name;
            return name === '' ? '' : _react2.default.createElement(
              'div',
              { className: 'jwck-plugin-item', onClick: function onClick() {
                  return self.selectPluginItem(item, name);
                } },
              name
            );
          })
        )
      );
    }
  }, {
    key: 'removePluginItem',
    value: function removePluginItem(index) {
      var _this5 = this;

      var items = this.state.varSelected;
      items.splice(index, 1);
      this.setState({ varSelected: items }, function () {
        _this5.changeHandle();
      });
    }
  }]);

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

exports.default = ExtPluginsEditor;