Skip to content

Commit

Permalink
build static
Browse files Browse the repository at this point in the history
  • Loading branch information
@arcturus011
arcturus011 committed Jul 6, 2018
1 parent e2320af commit be39a4b
Show file tree
Hide file tree
Showing 2 changed files with 843 additions and 86 deletions.
171 changes: 85 additions & 86 deletions lib/ReactUeditor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,16 +35,16 @@ var ReactUeditor = function (_React$Component) {
function ReactUeditor(props) {
_classCallCheck(this, ReactUeditor);

var _this2 = _possibleConstructorReturn(this, (ReactUeditor.__proto__ || Object.getPrototypeOf(ReactUeditor)).call(this));
var _this = _possibleConstructorReturn(this, (ReactUeditor.__proto__ || Object.getPrototypeOf(ReactUeditor)).call(this));

_this2.state = {
_this.state = {
videoModalVisible: false,
audioModalVisible: false,
videoSource: '',
audioSource: ''
};

_this2.createScript = function (url) {
_this.createScript = function (url) {
var scriptTags = window.document.querySelectorAll('script');
var len = scriptTags.length;
var i = 0;
Expand All @@ -64,176 +64,156 @@ var ReactUeditor = function (_React$Component) {
});
};

_this2.registerImageUpload = function () {
_this.registerImageUpload = function () {
window.UE.registerUI('imageUpload', function (editor, uiName) {
var btn = new window.UE.ui.Button({
name: uiName,
title: '文件上传',
cssRules: 'background-position: -726px -77px;',
onclick: function onclick() {
_this2.tempfileInput.click();
editor._react_ref.tempfileInput.click();
}
});

return btn;
});
};

_this2.registerSimpleInsertCode = function () {
window.UE.registerUI('simpleInsertCode', function (editor, uiName) {
var btn = new window.UE.ui.Button({
name: uiName,
title: '插入代码',
cssRules: 'background: url(' + simpleInsertCodeIcon + ') !important; background-size: 20px 20px !important;',
onclick: function onclick() {
if (_this2.ueditor) {
_this2.ueditor.focus();
_this2.ueditor.execCommand('insertcode');
}
}
});

return btn;
});
};

_this2.registerUploadVideo = function () {
var _this = _this2;
_this.registerUploadVideo = function () {
window.UE.registerUI('videoUpload', function (editor, uiName) {
var btn = new window.UE.ui.Button({
name: uiName,
title: '上传视频',
cssRules: 'background-position: -320px -20px;',
onclick: function onclick() {
_this.setState({ videoModalVisible: true });
editor._react_ref.setState({ videoModalVisible: true });
}
});

return btn;
});
};

_this2.registerUploadAudio = function () {
var _this = _this2;
_this.registerUploadAudio = function () {
window.UE.registerUI('audioUpload', function (editor, uiName) {
var btn = new window.UE.ui.Button({
name: uiName,
title: '上传音频',
cssRules: 'background: url(' + uploadAudio + ') !important; background-size: 20px 20px !important;',
onclick: function onclick() {
_this.setState({ audioModalVisible: true });
editor._react_ref.setState({ audioModalVisible: true });
}
});

return btn;
});
};

_this2.uploadImage = function (e) {
var uploadImage = _this2.props.uploadImage;
_this.uploadImage = function (e) {
var uploadImage = _this.props.uploadImage;

if (uploadImage) {
var promise = uploadImage(e);
if (!!promise && typeof promise.then == 'function') {
promise.then(function (imageUrl) {
_this2.insertImage2(imageUrl);
_this.insertImage2(imageUrl);
});
}
}
_this2.tempfileInput.value = '';
_this.tempfileInput.value = '';
};

_this2.insertImage2 = function (imageUrl) {
if (_this2.ueditor) {
_this2.ueditor.focus();
_this2.ueditor.execCommand('inserthtml', '<img src="' + imageUrl + '" />');
_this.insertImage2 = function (imageUrl) {
if (_this.ueditor) {
_this.ueditor.focus();
_this.ueditor.execCommand('inserthtml', '<img src="' + imageUrl + '" />');
}
};

_this2.insert = function (html) {
if (_this2.ueditor) {
_this2.ueditor.execCommand('insertparagraph');
_this2.ueditor.execCommand('inserthtml', html, true);
_this2.ueditor.execCommand('insertparagraph');
_this2.ueditor.execCommand('insertparagraph');
_this.insert = function (html) {
if (_this.ueditor) {
_this.ueditor.execCommand('insertparagraph');
_this.ueditor.execCommand('inserthtml', html, true);
_this.ueditor.execCommand('insertparagraph');
_this.ueditor.execCommand('insertparagraph');
}
};

_this2.closeModal = function (type) {
_this.closeModal = function (type) {
switch (type) {
case 'video':
_this2.setState({ videoModalVisible: false });
_this.setState({ videoModalVisible: false });
break;
case 'audio':
_this2.setState({ audioModalVisible: false });
_this.setState({ audioModalVisible: false });
break;
}
};

_this2.initEditor = function () {
var _this2$props = _this2.props,
config = _this2$props.config,
plugins = _this2$props.plugins,
onChange = _this2$props.onChange,
value = _this2$props.value,
getRef = _this2$props.getRef;

_this2.ueditor = config ? window.UE.getEditor(_this2.containerID, config) : window.UE.getEditor(_this2.containerID);
_this.initEditor = function () {
var _this$props = _this.props,
config = _this$props.config,
plugins = _this$props.plugins,
onChange = _this$props.onChange,
value = _this$props.value,
getRef = _this$props.getRef;

_this.ueditor = config ? window.UE.getEditor(_this.containerID, config) : window.UE.getEditor(_this.containerID);
_this.ueditor._react_ref = _this;
if (plugins && plugins instanceof Array && plugins.length > 0) {
if (plugins.indexOf('uploadImage') !== -1) _this2.registerImageUpload();
if (plugins.indexOf('insertCode') !== -1) _this2.registerSimpleInsertCode();
if (plugins.indexOf('uploadVideo') !== -1) _this2.registerUploadVideo();
if (plugins.indexOf('uploadAudio') !== -1) _this2.registerUploadAudio();
if (plugins.indexOf('uploadImage') !== -1) _this.registerImageUpload();
if (plugins.indexOf('insertCode') !== -1) _this.registerSimpleInsertCode();
if (plugins.indexOf('uploadVideo') !== -1) _this.registerUploadVideo();
if (plugins.indexOf('uploadAudio') !== -1) _this.registerUploadAudio();
}
getRef && getRef(_this2.ueditor);
_this2.ueditor.ready(function () {
_this2.ueditor.addListener('contentChange', function () {
getRef && getRef(_this.ueditor);
_this.ueditor.ready(function () {
_this.ueditor.addListener('contentChange', function () {
// 由 componentWillReceiveProps 导致的 contentChange 不需要通知父组件
if (_this2.isContentChangedByWillReceiveProps) {
_this2.isContentChangedByWillReceiveProps = false;
if (_this.isContentChangedByWillReceiveProps) {
_this.isContentChangedByWillReceiveProps = false;
} else {
_this2.content = _this2.ueditor.getContent();
_this.content = _this.ueditor.getContent();

if (onChange) {
onChange(_this2.ueditor.getContent());
onChange(_this.ueditor.getContent());
}
}
});

if (_this2.isContentChangedByWillReceiveProps) {
_this2.isContentChangedByWillReceiveProps = false;
_this2.ueditor.setContent(_this2.content);
if (_this.isContentChangedByWillReceiveProps) {
_this.isContentChangedByWillReceiveProps = false;
_this.ueditor.setContent(_this.content);
} else {
_this2.ueditor.setContent(value);
_this.ueditor.setContent(value);
}
});
};

_this2.content = props.value || ''; // 存储编辑器的实时数据，用于传递给父组件
_this2.ueditor = null;
_this2.isContentChangedByWillReceiveProps = false;
_this2.tempfileInput = null;
_this2.containerID = 'reactueditor' + Math.random().toString(36);
_this2.fileInputID = 'fileinput' + Math.random().toString(36);
return _this2;
_this.content = props.value || ''; // 存储编辑器的实时数据，用于传递给父组件
_this.ueditor = null;
_this.isContentChangedByWillReceiveProps = false;
_this.tempfileInput = null;
_this.containerID = 'reactueditor' + Math.random().toString(36);
_this.fileInputID = 'fileinput' + Math.random().toString(36);
return _this;
}

_createClass(ReactUeditor, [{
key: 'componentDidMount',
value: function componentDidMount() {
var _this3 = this;
var _this2 = this;

var ueditorPath = this.props.ueditorPath;

if (!window.UE && !window.UE_LOADING_PROMISE) {
window.UE_LOADING_PROMISE = this.createScript(ueditorPath + '/ueditor.config.js').then(function () {
return _this3.createScript(ueditorPath + '/ueditor.all.min.js');
return _this2.createScript(ueditorPath + '/ueditor.all.min.js');
});
}
window.UE_LOADING_PROMISE.then(function () {
_this3.tempfileInput = document.getElementById(_this3.fileInputID);
_this3.initEditor();
_this2.tempfileInput = document.getElementById(_this2.fileInputID);
_this2.initEditor();
});
}

Expand All @@ -246,14 +226,14 @@ var ReactUeditor = function (_React$Component) {
}, {
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(nextProps) {
var _this4 = this;
var _this3 = this;

if ('value' in nextProps && this.props.value !== nextProps.value) {
this.isContentChangedByWillReceiveProps = true;
this.content = nextProps.value;
if (this.ueditor) {
this.ueditor.ready(function () {
_this4.ueditor.setContent(nextProps.value);
_this3.ueditor.setContent(nextProps.value);
});
}
}
Expand All @@ -268,10 +248,29 @@ var ReactUeditor = function (_React$Component) {

// uditor 自定义按钮的方式

}, {
key: 'registerSimpleInsertCode',
value: function registerSimpleInsertCode() {
window.UE.registerUI('simpleInsertCode', function (editor, uiName) {
var btn = new window.UE.ui.Button({
name: uiName,
title: '插入代码',
cssRules: 'background: url(' + simpleInsertCodeIcon + ') !important; background-size: 20px 20px !important;',
onclick: function onclick() {
if (editor) {
editor.focus();
editor.execCommand('insertcode');
}
}
});

return btn;
});
}
}, {
key: 'render',
value: function render() {
var _this5 = this;
var _this4 = this;

var _state = this.state,
videoModalVisible = _state.videoModalVisible,
Expand All @@ -291,7 +290,7 @@ var ReactUeditor = function (_React$Component) {
title: '\u4E0A\u4F20\u89C6\u9891',
visible: videoModalVisible,
closeModal: function closeModal() {
_this5.closeModal('video');
_this4.closeModal('video');
},
insert: this.insert,
upload: uploadVideo,
Expand All @@ -301,7 +300,7 @@ var ReactUeditor = function (_React$Component) {
title: '\u4E0A\u4F20\u97F3\u9891',
visible: audioModalVisible,
closeModal: function closeModal() {
_this5.closeModal('audio');
_this4.closeModal('audio');
},
insert: this.insert,
upload: uploadAudio,
Expand Down
Loading

0 comments on commit be39a4b

Please sign in to comment.