joywok-material-components
Version:
<h1 align="center"> Joywok Material Components </h1>
431 lines (402 loc) • 32 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
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 _reactDom = require('react-dom');
var _reactDom2 = _interopRequireDefault(_reactDom);
var _async = require('async');
var _async2 = _interopRequireDefault(_async);
var _antd = require('antd');
var _aloneTip = require('../tips/aloneTip');
var _aloneTip2 = _interopRequireDefault(_aloneTip);
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 组件使用
* FCPA在用的组件，后续用 JWEditor 替换 - 2021-5-10起
*
* @apiSuccessExample {json} 使用案例:
html中添加下面代码
<script>
var CKEDITOR_BASEPATH = '//' + location.host + '/public/scripts/ck4c/';
var cur_lang = 'zh-cn';
var lang='zh';//jy add
</script>
调用:
import {JwEditor} from 'joywok-material-components';
<JwEditor {...{
defaultValue:'',
attr:{
removeButtons : 'Cut,Copy,Paste,PasteFromword,Quote,Undo,Redo,CopyFormatting,Subscript,RemoveFormat,Brclear,NumberedList,BulletedList,Superscript,Indent,Outdent,Blockquote,Link,Unlink,Anchor,Textcolor,Bgcolor,Textindent,Format',
}
}} type={"RichText"} onChange={(e)=>{console.log(e)}}/>
*
*
*/
var jschars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];
require('./style/index.css');
function generateMixed(n) {
var res = "";
for (var i = 0; i < n; i++) {
var id = Math.ceil(Math.random() * 61);
res += jschars[id];
}
return res;
}
window.htmlencode = function (s) {
var div = document.createElement('div');
div.appendChild(document.createTextNode(s));
var html = div.innerHTML;
return html;
};
window.htmldecode = function (s) {
var div = document.createElement('div');
div.innerHTML = s;
var content = div.innerText || div.textContent;
return content;
};
var JwEditor = function (_React$Component) {
_inherits(JwEditor, _React$Component);
function JwEditor(props) {
_classCallCheck(this, JwEditor);
var _this = _possibleConstructorReturn(this, (JwEditor.__proto__ || Object.getPrototypeOf(JwEditor)).call(this, props));
_this.changeTime = null;
_this.id = generateMixed(16);
_this.config = Object.assign({}, {
cur_lang: cur_lang,
toolbarGroups: [{ name: 'document', groups: ['mode', 'document', 'doctools'] }, { name: 'clipboard', groups: ['clipboard', 'undo'] }, { name: 'editing', groups: ['find', 'selection', 'spellchecker'] }, { name: 'forms' }, { name: 'basicstyles', groups: ['basicstyles', 'cleanup'] }, { name: 'paragraph', groups: ['list', 'indent', 'blocks', 'align', 'bidi'] }, { name: 'links' }, { name: 'insert' }, { name: 'styles' }, { name: 'colors' }, { name: 'tools' }, { name: 'others' }, { name: 'about' }],
removeButtons: 'Cut,Copy,Paste,pastefromword,Quote',
removeDialogTabs: 'link:advanced',
height: 2500,
removeFormatAttributes: "",
removeFormatTags: "",
font_names: '宋体/SimSun;新宋体/NSimSun;仿宋_GB2312/FangSong_GB2312;楷体_GB2312/KaiTi_GB2312;黑体/SimHei;微软雅黑/Microsoft YaHei;',
allowedContent: true,
extraAllowedContent: 'section[*]',
pasteFilter: null,
pasteFromWordRemoveFontStyles: true
}, props.attr || {});
console.log(_this.config, props);
return _this;
}
_createClass(JwEditor, [{
key: 'render',
value: function render() {
var self = this;
var aloneTip = null;
var upload = {
name: 'file',
headers: {
'Access-Token': window.AccessToken
},
withCredentials: true,
showUploadList: false,
customRequest: function customRequest(option) {
function getError(option, xhr) {
var msg = 'cannot post ' + option.action + ' ' + xhr.status + '\'';
var err = new Error(msg);
err.status = xhr.status;
err.method = 'post';
err.url = option.action;
return err;
}
function getBody(xhr) {
var text = xhr.responseText || xhr.response;
if (!text) {
return text;
}
try {
return JSON.parse(text);
} catch (e) {
return text;
}
}
var xhr = new XMLHttpRequest();
if (option.onProgress && xhr.upload) {
xhr.upload.onprogress = function progress(e) {
if (e.total > 0) {
e.percent = e.loaded / e.total * 100;
}
option.onProgress(e);
};
}
var formData = new FormData();
if (option.data) {
Object.keys(option.data).map(function (key) {
formData.append(key, option.data[key]);
});
}
formData.append(option.filename, option.file);
xhr.onerror = function error(e) {
option.onError(e);
};
xhr.onload = function onload() {
if (xhr.status < 200 || xhr.status >= 300) {
return option.onError(getError(option, xhr), getBody(xhr));
}
option.onSuccess(getBody(xhr));
};
var actionUrl = '/api/file/upcover?access_token=' + window.AccessToken + '&jwfile=' + encodeURIComponent(option['file']['name']);
///api/file/upcover?access_token=grcg3jhb8adqjc76svg9nklt13
xhr.open('POST', actionUrl, true);
if (option.withCredentials && 'withCredentials' in xhr) {
xhr.withCredentials = true;
}
var headers = option.headers || {};
if (headers['X-Requested-With'] !== null) {
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
}
for (var h in headers) {
if (headers.hasOwnProperty(h) && headers[h] !== null) {
xhr.setRequestHeader(h, headers[h]);
}
}
xhr.send(option.file);
return {
abort: function abort() {
xhr.abort();
}
};
},
beforeUpload: function beforeUpload(file, fileList) {
var type = file.type.split('/')[1];
//6291456
//15728640
if (15728640 <= file.size) {
// self.setState({tip:('文件大小超过限制，单张最大6M'),tipOpen:true,tipType:'error',tipHide:2000,uploading:false})
(0, _aloneTip2.default)({ type: 'error', duration: 2000, hasclose: false, autoHideDuration: 2000, message: '文件大小超过限制，单张最大6M' });
return false;
}
if (_.indexOf(["png", 'jpg', 'jpeg', 'gif'], type) == -1) {
(0, _aloneTip2.default)({ type: 'error', duration: 2000, hasclose: false, autoHideDuration: 2000, message: '请上传正确格式的文件' });
return false;
}
},
onStart: function onStart(info) {
// self.setState({tip:'正在上传' + info['name'],tipOpen:true,tipType:'warning',tipHide:null})
aloneTip = (0, _aloneTip2.default)({ type: 'info', duration: 100000000, hasclose: false, autoHideDuration: 100000000, message: '正在上传' + info['name'] });
},
onProgress: function onProgress(step, file) {
// self.props.onProgress && self.props.onProgress(step, file);
},
onError: function onError(error) {
aloneTip.close();
aloneTip = (0, _aloneTip2.default)({ type: 'error', duration: 2000, hasclose: false, autoHideDuration: 2000, message: info['error'].toString() });
// self.setState({tip:error.toString(),tipOpen:true,tipType:'error',tipHide:2000,uploading:false})
},
onSuccess: function onSuccess(info) {
aloneTip.close();
if (info['error_code']) {
aloneTip = (0, _aloneTip2.default)({ type: 'error', duration: 2000, hasclose: false, autoHideDuration: 2000, message: info['error'].toString() });
} else {
self.editor.focus();
var str = '<img src="' + info.append.original.link + '" />';
var el2 = CKEDITOR.dom.element.createFromHtml(str);
CKEDITOR.instances.editor.insertElement(el2);
}
}
};
return _react2.default.createElement(
'div',
{ className: 'jw-editor', id: 'jw-editor-' + this.id },
_react2.default.createElement(
_antd.Upload,
_extends({}, upload, { className: 'upload' }),
_react2.default.createElement(
'div',
{ className: 'jw-upload-file-icon-c' },
'\u4E0A\u4F20\u6587\u4EF6'
)
)
);
}
}, {
key: 'componentDidMount',
value: function componentDidMount() {
var self = this;
if (typeof CKEDITOR == "undefined") {
var a = (0, _aloneTip2.default)({ type: 'warning', duration: 10000000, hasclose: false, autoHideDuration: 10000000, message: '正在加载编辑器资源文件…' });
_async2.default.parallel({
css: function css(cb) {
$.get('/public/scripts/editor/editor/themes/default/css/jweditor.css', function (d) {
$('body').append('<style type="text/css">' + d + '</style>');cb(null, 'css');
});
},
editor: function editor(cb) {
// $.get('/public/scripts/ck4c/ckeditor.js', function(){ cb(null, 'editor'); });
$.get('/public/scripts/ck4c/ckeditor.js', function () {
cb(null, 'editor');
});
}
}, function (err, ret) {
setTimeout(function () {
a.close();
self.initEditor2();
}, 0);
});
} else {
setTimeout(function () {
self.initEditor2();
}, 0);
}
}
}, {
key: 'initConfig',
value: function initConfig() {
CKEDITOR.addCss('body{margin:0} *{margin:0;padding:0;max-width:100%;} figure.image{outline: none; background: transparent;padding: 0;margin: 0;} figure{outline: none !important;}');
}
}, {
key: 'initEditor2',
value: function initEditor2() {
this.initConfig();
var that = this;
var self = this;
this.$el = $(".jw-editor");
if (this.editKey == undefined) this.editKey = 'content';
// this.id = this.editKey + Math.floor(Math.random()*100000000);
this.id = 'editor';
this.$el.append('<div id="' + this.id + '" name="' + this.id + '" type="text/plain">' + this.props.defaultValue + '</div>');
if (CKEDITOR.env.ie && CKEDITOR.env.version < 9) CKEDITOR.tools.enableHtml5Elements(document);
CKEDITOR.config.width = 'auto';
var initSample = function () {
var wysiwygareaAvailable = isWysiwygareaAvailable(),
isBBCodeBuiltIn = !!CKEDITOR.plugins.get('bbcode');
return function () {
var editorElement = CKEDITOR.document.getById(that.id);
if (isBBCodeBuiltIn) {
editorElement.setHtml('Hello world!\n\n' + 'I\'m an instance of [url=https://ckeditor.com]CKEditor[/url].');
}
if (wysiwygareaAvailable) {
CKEDITOR.replace(that.id, self.config);
} else {
editorElement.setAttribute('contenteditable', 'true');
CKEDITOR.inline(that.id, self.config);
}
};
function isWysiwygareaAvailable() {
if (CKEDITOR.revision == '%RE' + 'V%') {
return true;
}
return !!CKEDITOR.plugins.get('wysiwygarea');
}
}();
initSample();
CKEDITOR.on('instanceReady', function () {
self.changeUpload();
that.editor = CKEDITOR.instances.editor;
that.editor.iframe = document.getElementsByTagName('iframe')[0];
CKEDITOR.instances.editor.on('beforeCommandExec', function (e) {});
var timers = false;
CKEDITOR.instances.editor.on('change', function (e) {
if (timers) clearTimeout(timers);
timers = setTimeout(function () {
var val = that.editor.getData();
// that.model.set( that.editKey, val );
// that.model.collection.trigger('change');
self.props.onChange(val);
}, 0);
});
CKEDITOR.instances.editor.on('focus', function (a, b, c) {
var val = that.editor.getData();
if (that.placeHolder == val) {
that.editor.setData('');
}
});
CKEDITOR.instances.editor.on('blur', function (e) {
var val = that.editor.getData();
if ($.trim(val) == '') {
that.setPlaceHolder();
}
});
CKEDITOR.instances.editor.on('afterPaste', function (e) {
var win = that.editor.document.getWindow().$;
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 {
$(this).attr('src', '/openfile/getpartimg?url=' + encodeURIComponent(vsrc));
$(this).attr('data-cke-saved-src', '/openfile/getpartimg?url=' + encodeURIComponent(vsrc));
}
// var vsrc = $(this).attr('src');
});
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 {
$(this).css('background-image', 'url(/openfile/getpartimg?url=' + backg + ')');
}
}
}
}
});
that.editor.fire('saveSnapshot');
});
CKEDITOR.instances.editor.on('afterPasteFromWord', function (e) {
var win = that.editor.document.getWindow().$;
var data = e.data.dataValue;
data = data.replace(/font-size:([0-9]+(.[0-9]{1,3}))p(t|x)/gi, '');
console.log(e, win, data, 'asdas');
});
that.iwin = that.editor.document.getWindow().$;
that.idoc = that.editor.document;
var ext = that.idoc.$.createElement('script');
ext.src = '/public/scripts/ck4c/ext.js';
ext.type = 'text/javascript';
that.idoc.$.head.appendChild(ext);
});
}
}, {
key: 'changeUpload',
value: function changeUpload() {
var self = this;
this.changeUploadTime = setInterval(function () {
if ($(".zhailei").length != 0) {
clearInterval(self.changeUploadTime);
} else {
// alert("12312312");
if ($(".cke_button__table").length != 0 && $('.cke_button__image').length == 0) {
var upload = $('<a id="cke_43" class="zhailei cke_button cke_button__image cke_button_off" href="javascript:void(\'\u63D2\u5165\u56FE\u7247\')" title="\u56FE\u50CF" tabindex="-1" hidefocus="true" role="button"><span class="cke_button_icon cke_button__image_icon" style="background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAQKADAAQAAAABAAAAQAAAAABGUUKwAAADl0lEQVR4Ae2Zu7ISQRCGDwe0Sl/CkxnpE2jEtdAi08RUfQWtMjXwGdRQE1MN5BbpC2hkeB5AU4pLAXYPfrjb7hQLKAekJzj/dE/3zOzf/87uck5OvDkDzoAz4Aw4A87AsTJQsBfeaDTm1qf2fL5wFwqLFGxirR+bceLxYzNu/diMb4us1263U9d8uu3Eh55fshcAU9aPvWqcOIu2otZmXvzYdp6/bbsCVjFq75lV8fs2Xq/XM8809ukKgIn/HWNniisgVvkYY8TLvfVS+3JqP8KnKHmvFOXseKy4780VYCtE5Xke23EqL3Gh8sQn4oJf4sIblyghpZBE3E667C92Pa6AWBlgLmM8VBRGwdlsFkKxxXj4K/dCFcD+Y9fjCoChdRFGQRRwenpYnB7WbtetUo74P74Gc+SE57zEpe5tW3k5C17nmGtnISjVLugKsIzAVOI0T4Xwhlcul8NzvlgsctqHuOl0Girf7/dTCklNskeGK2DTYiQqvJNKt1qt67rX0WgUFCZKvJ1n76sU7QqIsQhzsfFd+4fD4Tddk33VarUHanc6nbeKqxp5Ns4VYBnZN7tarZ7rnjIq+Eb98jT6qChn0g/FdZsrwDIG07H3ABv/r2yp/AudW/ZzTZH92G8OeQP9ruPSUv/xWbh+K4d8/KArACa2xUqlEt4HhOlnOle32z3bZM5ms3lD88bj8ZNkPhUEk2PaF8UMFGXdq4q0WDzjrgCYsMhZYP0xW5gOvxKTJxUJ/5ERO7yx9Xq9z7HcpH8ymXxN2vS597FZB1vwivZl3XeKooT7ihlx6l42V8CSig07cu9T6dQMCeY/6YBUJihAKpP5Di/zjDUukafm2k3y72mSfDvcVBwMwtGg3czmCsikJYdTKvpBw/JWTOJuaby8wwfFlEqlM7XltH+qKO3SArL/cgbwy5Ndl9OeOPl2+JKcycYz5gqACRCmYBQ/KBW8q3355ecOvnVQ8kK44Hkyj/Vi6zMOEscc+EGUYMexQVcATKyB7zUWpkEY5x7Fzjuvrai1mSc2r/XH8pkHdAXAhEXLoHx3jzSGe5h4G2crQdy2aJWFzbysix+b8Ri6AmLM4JdTP3zdSeUv47sItBXNa3NGgXbvrgDLiLWl8s+tL8vmLIBpbGKtH5vxbZF7n3msbfezjKNzrFiyFx5jysbF7Fi+9VsbReDHZh3rx2Z8Uzz6M2BT4jzPGXAGnAFnwBlwBg6fgZ+xNH1sbw5N/wAAAABJRU5ErkJggg==);background-size: cover;"> </span><span id="cke_43_label" class="cke_button_label cke_button__image_label" aria-hidden="false">\u56FE\u50CF</span><span id="cke_43_description" class="cke_button_label" aria-hidden="false"></span></a>');
upload.on('click', function () {
$('.jw-upload-file-icon-c').click();
});
$(".cke_button__table").parent().append(upload);
} else {
clearInterval(self.changeUploadTime);
}
}
}, 100);
}
}, {
key: 'setPlaceHolder',
value: function setPlaceHolder() {
// this.editor.setData( this.placeHolder );
// this.model.set(this.editKey, '');
}
}, {
key: 'componentWillUnmount',
value: function componentWillUnmount() {
clearInterval(this.changeUploadTime);
}
}]);
return JwEditor;
}(_react2.default.Component);
exports.default = JwEditor;