joywok-material-components
Version:
<h1 align="center"> Joywok Material Components </h1>
769 lines (710 loc) • 34.2 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 _fuploader = require('./fuploader');
var _fuploader2 = _interopRequireDefault(_fuploader);
var _request = require('../utils/request');
var _request2 = _interopRequireDefault(_request);
var _uploadaudio = require('./uploadaudio');
var _uploadaudio2 = _interopRequireDefault(_uploadaudio);
var _uploadvideo = require('./uploadvideo');
var _uploadvideo2 = _interopRequireDefault(_uploadvideo);
var _extplugin = require('./extplugin');
var _extplugin2 = _interopRequireDefault(_extplugin);
var _ContentShow = require('./ContentShow');
var _ContentShow2 = _interopRequireDefault(_ContentShow);
var _events = require('events');
var _Dialog = require('../utils/Dialog');
var _Dialog2 = _interopRequireDefault(_Dialog);
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; } /**
*
* 请调用同目录中的 explugin.js
*
*/
require('./style/index.css');
window.EditorEvts = new _events.EventEmitter();
var fetchingJs = false;
var jwFormatFSize = function jwFormatFSize(fileSize) {
if (fileSize < 1024) {
return fileSize + 'B';
} else if (fileSize < 1024 * 1024) {
var temp = fileSize / 1024;
temp = temp.toFixed(2);
return temp + 'KB';
} else if (fileSize < 1024 * 1024 * 1024) {
var temp = fileSize / (1024 * 1024);
temp = temp.toFixed(2);
return temp + 'MB';
} else {
var temp = fileSize / (1024 * 1024 * 1024);
temp = temp.toFixed(2);
return temp + 'GB';
}
};
var formatAudioTime = function formatAudioTime(time) {
var ret = time % 60;
var minute = time % 3600;
var hours = time % 86400;
if (time > 3600) minute = time % 3600;
if (time > 86400) hours = time % 86400;
ret = Math.floor(minute / 60) + ':' + ret;
if (time > 3600) ret = Math.floor(hours / 3600) + ':' + ret;
ret = (ret + '').replace(/\b(\w)\b/g, '0$1');
if (time > 86400) ret = Math.floor(time / 86400) + 'D ' + ret;
return ret;
};
var JoywokEditor = function (_React$Component) {
_inherits(JoywokEditor, _React$Component);
_createClass(JoywokEditor, [{
key: 'saveDom',
value: function saveDom() {
this.checkChange();
var v = this.editor.getData();
typeof this.props.onChange === 'function' && this.props.onChange({ editor: this.editor }, v);
}
}, {
key: 'checkChange',
value: function checkChange() {
this.editor.window.$.$ && this.editor.window.$.$('.jwh5audio').each(function () {
$(this).removeClass('jwaudio-playing');
$(this).find('audio').get(0).pause();
});
}
}, {
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(d) {
var _this2 = this;
d.defaultValue = d.defaultValue || '';
var editor = this.editor;
// if(editor!==undefined){
this.setState({ value: d.defaultValue });
// }
if (this.state.value !== d.defaultValue) {
editor && editor.setData(d.defaultValue);
}
if (this.props.curLang !== d.curLang) {
editor && editor.setData(d.defaultValue);
}
if (d.toolbarPosition === undefined) d.toolbarPosition = false;
if (d.toolbarPosition !== this.state.toolbarPosition) {
this.setState({ toolbarPosition: d.toolbarPosition }, function () {
if (_this2.state.toolbarPosition !== false) {
_this2.initToolbar();
}
});
}
}
}, {
key: 'getParFile',
value: function getParFile(clsname, furl, type) {
var _this3 = this;
var url = furl;
if (furl.indexOf('http') === 0) {
(0, _request2.default)('/api/file/thirdimagelocal?appid=&app_type=jw_app_subscribe&url=' + encodeURIComponent(furl), { method: 'POST' }).then(function (resp) {
if (resp.data && resp.data.JMVerinfo && resp.data.JMVerinfo.append) {
if (resp.data.JMVerinfo.append.original === undefined) {
url = resp.data.JMVerinfo.append.thumbnails.open_url;
} else {
url = resp.data.JMVerinfo.append.original.open_url;
}
}
if (type === 1) {
_this3.editor.window.$.$(clsname).attr('src', url).removeAttr('data-cke-saved-src').removeAttr('data-cke-widget-data');
} else if (type === 2) {
_this3.editor.window.$.$(clsname).css('background-image', 'url(' + url + ')');
}
_this3.saveDom();
});
}
}
}, {
key: 'componentDidMount',
value: function componentDidMount() {
var _this4 = this;
var that = this;
if (this.props.onRef) this.props.onRef(this);
CKEDITOR.replace(this.state.className, this.state.editorConfig);
CKEDITOR.instances[this.state.className].on('contentDom', function (e) {
console.log('contentDom', e);
that.checkJS();
});
CKEDITOR.instances[this.state.className].on('configLoaded', function (e) {
console.log('configLoaded');
});
CKEDITOR.instances[this.state.className].on('loaded', function (e) {
that.editor = e.editor;
// console.log('loaded');
});
CKEDITOR.instances[this.state.className].on('change', function (e2) {
// console.log('change');
that.onChange(e2);
});
CKEDITOR.instances[this.state.className].on('addimg', function (ed) {
$('#up' + _this4.state.className).click();
});
CKEDITOR.instances[this.state.className].on('addaudio', function (ed) {
_this4.insertAudio(CKEDITOR.instances[_this4.state.className]);
});
CKEDITOR.instances[this.state.className].on('addvideo', function (ed) {
_this4.insertVideo(ed.editor);
});
CKEDITOR.instances[this.state.className].on('afterPaste', function (ee) {
// that.checkJS(()=>{
var win = ee.editor.window.$;
var vimgs = win.$('img');
vimgs.each(function () {
var vsrc = $(this).attr('src');
if (vsrc.indexOf('/openfile/') != -1 || vsrc.indexOf('/api2/') != -1 || vsrc.indexOf('/public/') != -1 || vsrc.indexOf('/dist/') != -1 || vsrc.indexOf('/file/') != -1) {
return;
} else {
var clsname = 'f_' + that.guid();
$(this).attr('id', clsname);
that.getParFile('#' + clsname, vsrc, 1);
}
});
var vsection = win.$('section');
vsection.each(function () {
var st = $(this).attr('style');
if (st != undefined) {
var backg = $(this).css('background');
if (typeof backg == 'string') {
if (backg.indexOf('url(') != -1) {
backg = /url\((.*?)\)/ig.exec(backg);
backg = backg[1];
backg = backg.replace(/\"/ig, '');
if (backg.indexOf('/openfile/') != -1 || backg.indexOf('/api2/') != -1 || backg.indexOf('/public/') != -1 || backg.indexOf('/dist/') != -1 || backg.indexOf('/file/') != -1) {
return;
} else {
var clsname = 'f_' + that.guid();
$(this).attr('id', clsname);
that.getParFile('#' + clsname, backg, 2);
}
}
}
}
});
var tables = win.$('table');
tables.each(function () {
var width = this.style.width;
if (!_.isEmpty(width)) {
this.style.width = '100%';
}
});
that.saveDom();
// })
});
CKEDITOR.instances[this.state.className].on('instanceReady', function (e) {
console.log('ready');
_this4.editor = e.editor;
if (_this4.state.value === '') {
_this4.editor.setData('​');
} else {
_this4.editor.setData(_this4.state.value);
}
if (_this4.state.toolbarPosition !== false) {
_this4.initToolbar();
}
window.EditorEvts.addListener('changeContent', function () {
_this4.onChange(e);
});
var timer = false;
if (_this4.props.simple === true) {
if (window.PubSub) {
window.PubSub.unsubscribe('editorChangeValue');
window.PubSub.subscribe('editorChangeValue', function (v, d) {
e.editor.setData(d);
});
}
}
});
}
}, {
key: 'checkEditor',
value: function checkEditor() {
var _this5 = this;
var focusM = new CKEDITOR.focusManager(this.editor);
var acNode = focusM.currentActive;
if (acNode) {
if (acNode.$.nodeName === 'BODY') {
var childs = acNode.getChildren();
if (childs.count() > 0) {
var texti = '​';
if (childs.getItem(childs.count() - 1).$.nodeType !== 3) {
$(childs.getItem(childs.count() - 1).$).after(texti);
setTimeout(function () {
var range = new CKEDITOR.dom.range(_this5.editor.document);
range.moveToElementEditEnd(childs.getItem(childs.count() - 1));
range.collapse(true);
}, 100);
}
}
}
}
}
}, {
key: 'checkJS',
value: function checkJS(cb) {
var that = this;
if (this.editor) {
var v = this.editor.getData();
if (v === 'undefined') {
this.editor.setData('');
}
}
// if( fetchingJs===true ){
// // if(typeof cb==='function') cb();
// return;
// }
if (this.editor.document.$.getElementById('jwckpluginjs') !== null) {
if (typeof cb === 'function') cb();
return;
}
// fetchingJs = true;
var extjs = this.editor.document.$.createElement('script');
extjs.type = 'text/javascript';
extjs.id = 'jwckpluginjs';
extjs.src = '/dist/scripts/ck4c/jwplugins.js?v=' + (window.version || this.guid());
if (this.editor.document.$.getElementById('jwckpluginjs')) this.editor.document.$.getElementById('jwckpluginjs').remove();
this.editor.document.$.head.appendChild(extjs);
var style = this.editor.document.$.createElement('link');
style.type = 'text/css';
style.rel = 'stylesheet';
style.id = 'jwckplugincss';
style.href = '/dist/scripts/ck4c/jwplugins.css?v=' + (window.version || this.guid());
style.addEventListener('load', function () {
fetchingJs = false;
if (typeof cb === 'function') cb();
}, false);
if (this.editor.document.$.getElementById('jwckplugincss')) this.editor.document.$.getElementById('jwckplugincss').remove();
this.editor.document.$.head.appendChild(style);
$(this.editor.window.$).unbind('keydown');
$(this.editor.window.$).keydown(function (e) {
if (e.keyCode === 8) {
that.checkEditor();
}
});
$(this.editor.window.$).unbind('mouseover');
$(this.editor.window.$).mouseover(function () {
that.checkEditor();
});
}
// checkJS(cb){
// if(this.editor.document.$.getElementById('jwckpluginjs')===null){
// if(this.state.fetchTimer) clearTimeout(this.state.fetchTimer);
// this.state.fetchTimer = setTimeout(()=>{
// var extjs = this.editor.document.$.createElement('script');
// extjs.type='text/javascript';
// extjs.id='jwckpluginjs';
// extjs.src='/public/scripts/ck4c/jwplugins.js?v='+window.version;
// extjs.addEventListener('load', function(){
// if(typeof cb==='function') cb();
// }, false);
// this.editor.document.$.head.appendChild( extjs );
// let style = this.editor.document.$.createElement('link');
// style.type='text/css';
// style.rel='stylesheet';
// style.href='/public/scripts/ck4c/jwplugins.css?v='+window.version;
// this.editor.document.$.head.appendChild( style );
// }, 200)
// }else{
// if(typeof cb==='function') cb();
// }
// }
}, {
key: 'render',
value: function render() {
var value = this.state.value;
// let value = this.props.defaultValue;
return _react2.default.createElement(
'div',
{ className: 'joywok-editor ' + this.state.toolbarStyle },
_react2.default.createElement(
'textarea',
{ id: this.state.className },
value
),
_react2.default.createElement(_fuploader2.default, { appType: this.props.appType, appId: this.props.appId, id: 'up' + this.state.className, className: 'insertImageInput', multiple: true, beforeUpload: this.beforeUploadImage, onChange: this.uploadImage, action: '/api/file/upload', accept: this.state.imageFormat })
);
}
}, {
key: 'insertItem',
value: function insertItem(str) {
var el = CKEDITOR.dom.element.createFromHtml(str);
this.editor.insertElement(el);
}
}, {
key: 'insertLoading',
value: function insertLoading(file) {
var el = CKEDITOR.dom.element.createFromHtml('<img src="/dist/images/loading.gif" id="fid_' + file.uid + '" />');
this.editor.insertElement(el);
}
}, {
key: 'checkFile',
value: function checkFile(file, callback) {
return new Promise(function (res, rej) {
new jwFSha1({
file: file,
cb: function cb(tsha1) {
var url = "/api/file/fileifexist?tsha1=" + tsha1 + "&jwfile=" + encodeURIComponent(encodeURIComponent(file.name)) + "&size=" + file.size + "&app_type=jw_n_subscribe";
(0, _request2.default)(url, { method: 'GET' }).then(function (d) {
if (d.data && d.data.JMAttachment && d.data.JMAttachment.id) {
callback(d.data.JMAttachment);
rej({ error: 'has file' });
} else {
if (d.data && d.data.errcode && d.data.errcode === 'no-network') {
rej({ error: d.data.errmemo });
} else {
res(1);
}
}
});
}
});
});
}
}, {
key: 'getImageUrl',
value: function getImageUrl(file) {
if (file.JMAttachment) file = file.JMAttachment;
var url = '';
if ((file.ext_name + '').toLowerCase() === 'gif') {
url = 'original';
} else {
url = 'preview';
}
url = '/openfile/getfile?id=' + file.id + '&type=jw_n_image&size=' + url;
return url;
}
}, {
key: 'fixTokenUrl',
value: function fixTokenUrl(url) {
url = url.replace(/\/api2\//ig, '/');
if (url.indexOf('/api') === 0) {
if (url.indexOf('access_token') === -1) {
url = url + '&access_token=' + window.token;
}
}
return url;
}
}, {
key: 'breakParent',
value: function breakParent(id) {
var element = new CKEDITOR.dom.element(this.editor.window.$.$('#' + id).get(0));
var p = this.editor.window.$.$('#' + id).parent().get(0);
if (p.tagName && (p.tagName + '').toLowerCase() === 'span') {
var parent_element = new CKEDITOR.dom.element(p);
element.breakParent(parent_element);
}
}
}, {
key: 'insertAudio',
value: function insertAudio() {
var _this6 = this;
var that = this;
var a = (0, _Dialog2.default)({
app: window.dvaApp,
data: {
open: true,
actions: [],
onClose: function onClose() {
a.close();
}
},
component: function component() {
return _react2.default.createElement(_uploadaudio2.default, { onOk: function onOk(file) {
_this6.insertAudioToContent(file);
a.close();
}, appType: that.props.appType, appId: that.props.appId, cancel: function cancel() {
return a.close();
}, format: _this6.props.config.audioFormat });
}
});
}
}, {
key: 'getVideoStr',
value: function getVideoStr(v) {
// d:{ coverUrl:'', videoUrl:''}
// urlData: {cover: '', title: '', url: ''}
// // <iframe frameborder="0" width="300" height="150" allow="autoplay; fullscreen" allowfullscreen="true" src={"//v.qq.com/txp/iframe/player.html?origin="+encodeURIComponent(location.origin)+"&vid="+this.getVid(self.state.urlData.url)+"&autoplay=false&show1080p=false&isDebugIframe=false"}>
var str = '';
var removeBtn = '<section style="display:none;" class="em-video-remove-btn"><svg viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-2434.000000, -531.000000)"><g transform="translate(2434.000000, 531.000000)"><polygon id="Bounds" points="-3.66072173e-11 0 24 0 24 24 -3.66072173e-11 24"></polygon><path d="M8,21 L16,21 C17.1,21 18,20.1 18,19 L18,7 L6,7 L6,19 C6,20.1 6.9,21 8,21 Z M15.5,4 L14.5,3 L9.5,3 L8.5,4 L5,4 L5,6 L19,6 L19,4 L15.5,4 Z" id="Shape" fill="#777777"></path></g></g></g></svg></section>';
if (v.urlData) {
var qq_reg = /https?:\/\/v.qq.com(.*\/)?(.{11})\.html/;
var matches = qq_reg.exec(v.urlData.url);
str = '';
if (matches === null) {
str = '<section>' + i18n('label.pubsub-video-link-error') + '</section>';
} else {
var vid = matches[2];
var src = '//v.qq.com/txp/iframe/player.html?origin=' + encodeURIComponent(location.origin) + '&vid=' + vid + '&autoplay=false&show1080p=false&isDebugIframe=false';
str = '<section><section class="tencent_video_container">' + removeBtn + '<iframe allow="autoplay; fullscreen" allowfullscreen="true" src="' + src + '"></iframe></section></section>';
}
} else {
var cover = (v.coverUrl + '').replace('/api2', '');
var bg = '';
if (cover === '' || cover === undefined) {} else {
if (cover.indexOf('/file/viewpreview?id=') !== -1) {
cover = cover.replace('/file/viewpreview?id=', '/openfile/getfile?size=preview&type=jw_n_image&id=');
}
bg = '<section class="ed_video_preview"><section class="ed_video_preview_img" style="background-image:url(' + cover + ')"></section></section><section class="ed_video_preview_btn"></section>';
}
str = '<section><section class="ed_video_p_w" style="position: relative;" contenteditable="false">' + removeBtn + '<section class="ed_video_player"><video src="' + (v.videoUrl + '').replace('/api2', '') + '" controls="controls" controlslist="nodownload nofullscreen"></video></section>' + bg + '</section></section>';
}
return str;
}
}, {
key: 'initConfig',
value: function initConfig() {
CKEDITOR.dtd.$block.svg = 1;
CKEDITOR.dtd.$block.g = 1;
CKEDITOR.dtd.$block.polygon = 1;
CKEDITOR.dtd.$block.path = 1;
CKEDITOR.dtd.polygon = {
'#': 1,
style: 1
};
CKEDITOR.dtd.path = {
'#': 1,
style: 1
};
CKEDITOR.dtd.foreignObject = {
'#': 1,
style: 1,
svg: 1
};
CKEDITOR.dtd.animateTransform = {
'#': 1,
style: 1
};
CKEDITOR.dtd.rect = {
'#': 1,
style: 1,
animate: 1,
path: 1
};
CKEDITOR.dtd.animate = {
'#': 1,
style: 1,
animate: 1,
rect: 1,
g: 1,
path: 1
};
CKEDITOR.dtd.g = {
'#': 1,
style: 1,
polygon: 1,
path: 1,
g: 1,
rect: 1,
animate: 1,
animateTransform: 1,
foreignObject: 1
};
CKEDITOR.dtd.svg = {
'#': 1,
style: 1,
polygon: 1,
path: 1,
g: 1,
rect: 1,
animate: 1,
text: 1,
svg: 1,
animateTransform: 1,
foreignObject: 1
};
CKEDITOR.dtd.section.svg = 1;
CKEDITOR.dtd.div.svg = 1;
CKEDITOR.dtd.p.svg = 1;
CKEDITOR.dtd.td.svg = 1;
var defConfig = {
fillEmptyBlocks: false,
linkDefaultProtocol: 'https://',
extraPlugins: 'magicline,autogrow,insertimage,insertaudio,insertvideo',
// extraPlugins: 'autogrow,insertimage',
autoGrow_onStartup: true,
autoGrow_maxHeight: 350,
autoGrow_minHeight: 350,
// height: 300,
enterMode: 2, // CKEDITOR.ENTER_BR,
shiftEnterMode: 3, // CKEDITOR.ENTER_DIV,
// allowedContent: true,
// allowedContent: {
// $1: {
// elements: CKEDITOR.dtd,
// attributes: true,
// styles: true,
// classes: true
// }
// },
// disallowedContent: 'script; *[on*]; p div{line*, font*, max*, color*, white*, word*, letter*, -webkit*, background*, overflow*, position}; span{display, width}',
allowedContent: {
$1: {
elements: CKEDITOR.dtd,
attributes: true,
styles: true,
classes: true
}
},
disallowedContent: 'script; *[on*]; section{pointer*}; p div{color*, white*, word*, letter*}',
pasteFilter: null,
fontSize_defaultLabel: '16',
fontSize_sizes: '12/12px;13/13px;14/14px;16/16px;18/18px;20/20px;22/22px;24/24px;28/28px;32/32px;48/48px;72/72px;96/96px;',
line_height: "1;1.5;1.7;2;3;4;5;6;7;8;9;10",
// removeButtons: 'placeholder,createplaceholder,emojipanel,emoji,brclear,Font,letterspacing,Format,Styles,Iframe,PageBreak,Replace,Flash,Language,PasteText,Save,About,Placeholder,Source,Preview,Templates,Cut,Copy,Paste,PasteFromWord,Blockquote,CreateDiv,BidiLtr,BidiRtl,Unlink,Anchor,Image,HorizontalRule,Maximize,ShowBlocks',
// removePlugins:'elementspath,resize',
// removeFormatAttributes: 'class,style,lang,width,height,align,hspace,valign',
// removeFormatTags: 'b,big,code,del,dfn,em,font,i,ins,kbd,q,samp,small,span,strike,script,strong,sub,sup,tt,u,var',
removeDialogTabs: 'link:advanced',
language: window.cur_lang || 'zh-cn',
removeButtons: 'Cut,Copy,Paste,Anchor,Font,Unlink',
toolbarGroups: [{ name: 'document', groups: ['mode', 'document', 'doctools'] }, { name: 'clipboard', groups: ['clipboard', 'undo'] }, { name: 'editing', groups: ['find', 'selection', 'spellchecker', 'editing'] }, { name: 'forms', groups: ['forms'] }, { name: 'basicstyles', groups: ['basicstyles', 'cleanup'] }, { name: 'colors', groups: ['colors'] }, { name: 'customobj', groups: ['insertimage', 'insertvideo', 'insertaudio'] }, '/', { name: 'paragraph', groups: ['list', 'indent', 'blocks', 'align', 'bidi', 'paragraph'] }, { name: 'links', groups: ['links'] }, { name: 'insert', groups: ['insert'] }, { name: 'styles', groups: ['styles'] }, { name: 'tools', groups: ['tools'] }, { name: 'others', groups: ['others'] }, { name: 'about', groups: ['about'] }],
contentsCss: [] //'/public/scripts/ck4c/jwplugins.css',
};
var config = this.props.config === undefined ? {} : this.props.config;
config = _.extend(defConfig, config);
this.state = {
curLang: this.props.curLang,
value: this.props.defaultValue || '',
toolbarPosition: this.props.toolbarPosition || false,
editorName: this.props.editorName || 'JWCK' + this.guid(),
className: this.props.className || 'jwck_' + this.guid(),
toolbarStyle: this.props.toolbarStyle,
editorConfig: config,
showAudioDialog: false,
showVideoDialog: false,
imageFormat: this.props.config.imageFormat || ['.png', '.jpg', '.jpeg', '.bmp', '.gif'],
videoFormat: this.props.config.videoFormat || ['.mp4', '.mpeg', '.mpg', '.avi', '.asf', '.wmv', '.mov', '.3gp', '.flv', '.h264', '.mkv', '.rm', '.rmvb'],
showAudioCoverDilog: false
};
}
}, {
key: 'initToolbar',
value: function initToolbar() {
var _this7 = this;
if ($('#' + this.state.editorName + ' .cke_top').length === 0) {
setTimeout(function () {
_this7.initToolbar();
}, 100);
} else {
$('#' + this.state.editorName + ' .jwedtoolbar div').replaceWith($('#' + this.state.editorName + ' .cke_top'));
}
}
}]);
function JoywokEditor(props) {
_classCallCheck(this, JoywokEditor);
var _this = _possibleConstructorReturn(this, (JoywokEditor.__proto__ || Object.getPrototypeOf(JoywokEditor)).call(this, props));
_this.onChange = function (e) {
_this.checkChange();
var v = e.editor.getData();
typeof _this.props.onChange === 'function' && _this.props.onChange(e, v);
};
_this.beforeUploadImage = function (file) {
_this.insertLoading(file);
return _this.checkFile(file, function (response) {
var item = _this.editor.document.$.getElementById('fid_' + file.uid);
var itemP = item.parentNode;
itemP.replaceChild($('<img src="' + _this.getImageUrl(response) + '" />').get(0), item);
var div = $('<div><br /></div>').get(0);
itemP.appendChild(div);
_this.saveDom();
});
};
_this.uploadImage = function (e) {
if (e.file.status === 'done') {
var item = _this.editor.document.$.getElementById('fid_' + e.file.uid);
var itemP = item.parentNode;
itemP.replaceChild($('<img src="' + _this.getImageUrl(e.file.response) + '" />').get(0), item);
var div = $('<div><br /></div>').get(0);
itemP.appendChild(div);
_this.saveDom();
}
};
_this.insertAudioToContentCommon = function (file) {
var item = _this.editor.document.$.getElementById('fid_' + file.uid);
_this.breakParent('fid_' + file.uid);
var itemP = item.parentNode;
var url = _this.fixTokenUrl(file.response.mp3);
var str = '<div><section class="jwh5audio-w"><section class="jwh5audio" contenteditable="false" style="width: 0;height: 0;background-color: #f7f7f7;padding-right: 100%;padding-bottom: 15.2%;position: relative;">\
<section class="jwh5audio1" style="width: 22.2%; height: 100%; background-color: #31C27C; position: absolute; left: 0; top: 0; background-position: center; background-size: cover; background-image: url(' + file.response.cover + ');">\
<section style="position: absolute; left: 35.5%; top: 30%; width: 27%; height: 39%; background-color: rgba(0, 0, 0, .3); border: 1px solid #fff; border-radius: 100%;">\
<section style="position: absolute; left: 39%; top: 35%; width: 0; height: 0; border-width: .4rem 0 .4rem .6rem; border-style: solid; border-color: transparent transparent transparent #fff;"></section>\
<audio src="' + url + '" style="position: absolute; left:0; right:0; top: 0; bottom:0;"></audio>\
</section>\
</section>\
<section class="jwh5audio2" style="position: absolute; color: #333; left: 26%; top: 19%; right: 13%; font-size: 1.3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">' + file.name + '</section>\
<section class="jwh5audio3" style="position: absolute; left: 26%; color: #999; top: 55%; right: 13%; font-size: 1rem; white-space: nowrap;">' + formatAudioTime(file.response.audio_time) + ' | ' + jwFormatFSize(file.size) + '</section>\
<section class="jwh5audio4" style="position: absolute; top: 40%; right: 3%; width: 2.8%; height: 18%; background-size:16px 14px; background-position: 0 center; background-repeat: repeat-x; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAcCAYAAAAAwr0iAAAAjElEQVRIiWNkoDEwmfXf8/+/f7NAtjAyMaWdSWPcjmwjC60dALL8////MmAOxCGyyPJMGDqo7QCY5WhsujmAEBh1AAuhVEpzBxBKpbQGTIRSKc0dgCEy6oBRB9AZUFwZUVqOUOwASssRgg4g5ENKyxGCDqB1SUkwEdK6pBwtB0YdMOqAUQcMrAMYGBgAlnBeknCJI/QAAAAASUVORK5CYII=);"></section>\
</section>\
<section class="jwh5audio5" style="display:none;"><svg class="jwpubsub_event_del" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-2434.000000, -531.000000)"><g transform="translate(2434.000000, 531.000000)"><polygon id="Bounds" points="-3.66072173e-11 0 24 0 24 24 -3.66072173e-11 24"></polygon><path d="M8,21 L16,21 C17.1,21 18,20.1 18,19 L18,7 L6,7 L6,19 C6,20.1 6.9,21 8,21 Z M15.5,4 L14.5,3 L9.5,3 L8.5,4 L5,4 L5,6 L19,6 L19,4 L15.5,4 Z" id="Shape" fill="#777777"></path></g></g></g></svg></section>\
</section></div>';
itemP.replaceChild($(str).get(0), item);
_this.setState({ showAudioDialog: false });
};
_this.insertAudioToContent = function (file) {
_this.insertLoading(file);
_this.insertAudioToContentCommon(file);
_this.saveDom();
};
_this.insertVideoToContent = function (d) {
var rid = _this.guid();
_this.insertLoading({ uid: rid });
var str = _this.getVideoStr(d);
var item = _this.editor.document.$.getElementById('fid_' + rid);
var itemP = item.parentNode;
itemP.replaceChild($(str).get(0), item);
_this.setState({ showVideoDialog: false });
};
_this.insertVideo = function (d) {
// this.setState({showVideoDialog: true});
var that = _this;
var a = (0, _Dialog2.default)({
app: window.dvaApp,
data: {
open: true,
actions: [],
onClose: function onClose() {
a.close();
}
},
component: function component() {
return _react2.default.createElement(_uploadvideo2.default, { submit: function submit(d) {
var rid = _this.guid();
_this.insertLoading({ uid: rid });
var str = _this.getVideoStr(d);
var item = _this.editor.document.$.getElementById('fid_' + rid);
var itemP = item.parentNode;
itemP.replaceChild($(str).get(0), item);
_this.saveDom();
a.close();
}, appType: that.props.appType, appId: that.props.appId, cancel: function cancel() {
a.close();
} });
}
});
};
_this.initConfig();
return _this;
}
_createClass(JoywokEditor, [{
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();
}
}]);
return JoywokEditor;
}(_react2.default.Component);
JoywokEditor.EditorExtPlugin = _extplugin2.default;
JoywokEditor.EditorContentShow = _ContentShow2.default;
exports.default = JoywokEditor;