joywok-material-components
Version:
<h1 align="center"> Joywok Material Components </h1>
138 lines (110 loc) • 25.7 kB
JavaScript
;
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);
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
value = 'SQEEFEFEWFEF';
varSetting = false
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 s = {
editorConfig: this.props.config === undefined ? {} : this.props.config,
showAudioDialog: false,
showVideoDialog: false,
showImageDialog: false,
value: '',
curValue: '',
curLang: ''
};
if (_.isString(this.props.value) === true) {
s.curValue = this.props.value;
s.value = this.props.value;
} else {
s.curValue = '';
s.value = '';
}
this.state = s;
}
}]);
function ExtPluginsEditor(props) {
_classCallCheck(this, ExtPluginsEditor);
var _this = _possibleConstructorReturn(this, (ExtPluginsEditor.__proto__ || Object.getPrototypeOf(ExtPluginsEditor)).call(this, props));
_this.onChangeEditor = function (e) {
var v = e.editor.getData();
typeof _this.props.onChange === 'function' && _this.props.onChange(v);
};
_this.initConfig();
return _this;
}
_createClass(ExtPluginsEditor, [{
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(d) {}
}, {
key: 'render',
value: function render() {
var value = this.state.curValue || '';
return _react2.default.createElement(
'div',
{ className: 'joywok-editor-wrap', id: this.state.editorName },
_react2.default.createElement(_index2.default, { appType: this.props.appType, appId: this.props.appId, simple: true, toolbarStyle: '', curLang: 'zh-cn', onChange: this.onChangeEditor, defaultValue: value, config: this.state.editorConfig })
);
}
}, {
key: 'encodeValue',
value: function encodeValue(v) {
return v;
}
}, {
key: 'decodeValue',
value: function decodeValue(v) {
return v;
}
}]);
return ExtPluginsEditor;
}(_react2.default.Component);
exports.default = ExtPluginsEditor;