当前仓库属于暂停状态,部分功能使用受限,详情请查阅 仓库状态说明
加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
Eleditor.js 27.95 KB
一键复制 编辑 原始数据 按行查看 历史
Try 提交于 2018-03-17 15:12 . 更新 Eleditor.js
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877
/**
* Version: 1.8
* Title: Eleditor 移动端富文本编辑器
* Site: https://eleditor.fixel.cn
* Author: Try
*/
(function(w){
var _debug = false;
var _version = '1.7';
var _namespace = 'Eleditor';
var _notctname = ['INPUT', 'IMG', 'TEXTAREA'];
var _toolnames = {
insertText: '插文字',
insertImage: '插图片',
insertLink: '插链接',
insertHr: '水平线',
editText: '改文字',
"delete": '删除',
undo: '撤销',
cancel: '取消',
};
var _editorTpl = '';
w[_namespace] = function(){};
if( typeof jQuery === 'undefined' && typeof Zepto === 'undefined' ){
return console.warn('|--Eleditor 请引入jQuery或者Zepto!模块化环境请把依赖全局安装');
}else if( typeof $ === 'undefined' ){
var $ = typeof jQuery != 'undefined' ? jQuery : Zepto;
}
var _scriptPath = function(func){
var _js = document.scripts;
_js = _js[ _js.length - 1 ].src.substring(0, _js[ _js.length-1 ].src.lastIndexOf("/") + 1 );
func(_js);
return _js;
}(function(s){
var _buildLib = '<link rel="stylesheet" href="'+s+'layout/base.css'+(_debug ? '?v=' + (+new Date()) : '')+'">';
$('head').append(_buildLib);
});
var _inArray = function(s,a){
for(var i in a){
if(a[i]==s){
return true;
}
}
return false;
};
var _formatInnerText = function (t) {
var s = t.replace(/\ +/g, "");
s = t.replace(/[ ]/g, "");
s = t.replace(/[\r\n]/g, "");
return s.replace(/(^\s*)|(\s*$)/g, "");
};
var _getLayerMaxZIndex = function(){
var _max = Math.max.apply(null,
  $.map($('body *'), function(e) {
var _$e = $(e);
if (_$e.css('position') != 'static')
return parseInt(_$e.css('z-index')) || 1;
}));
return (_max + '').indexOf('Infinity') >= 0 ? 1 : _max + 1;
};
var _genEditorUid = function(){
return _namespace + '' + +new Date;
};
var _correctHtmlStructure = function(){
var _$wrap = arguments[0],
_empty = arguments[1];
$.each(_$wrap.find('iframe,audio,video'), function() {
var _$this = $(this),
_tagName = this.tagName.toLocaleLowerCase();
if( !_$this.parent().hasClass('Eleditor-'+_tagName+'-area') ){
$(this).wrap('<div class="Eleditor-'+_tagName+'-area"></div>');
}
});
if( _formatInnerText(_$wrap.text()) == '' && _$wrap.find('img,iframe,video').length === 0 ){
_$wrap.append(_empty);
}
if( _$wrap.find('*').length === 0 ){
_$wrap.html('<p class="Eleditor-placeholder">'+_$wrap.html()+'</p>');
}
};
var _buildEditorModule = function(_toolbars, _uid){
var _html = '<div class="Eleditor-wrap" style="z-index:'+_getLayerMaxZIndex()+'" id="'+_uid+'">\
<div class="Eleditor-controller">\
<ul>';
for (var i = 0; i < _toolbars.length; i++) {
var _it = _toolbars[i],
_id = typeof _it === 'object' ? _it.id : _it,
_tag = (typeof _it === 'object' && _it.tag) ? _it.tag.toLocaleLowerCase() : null,
_name = typeof _it === 'object' ? _it.name : _toolnames[_it];
_html += '<li event="'+_id+'" '+(_tag ? 'bind-tags="'+_tag+'"' : '')+' class="Eleditor-'+_id+'">'+_name+'</li>';
}
_html += ' </ul>\
</div>\
<div class="Eleditor-loading"><p></p></div>\
<div class="Eleditor-textEditor">\
<div class="Eleditor-textStyle">\
<div class="Eleditor-textStyle-item"><div class="Eleditor-textStyle-bold"></div></div>\
<div class="Eleditor-textStyle-item"><div class="Eleditor-textStyle-color"><span></span></div></div>\
<div class="Eleditor-textStyle-item"><div class="Eleditor-textStyle-linedecoration"></div></div>\
<div class="Eleditor-textStyle-item"><div class="Eleditor-textStyle-bgColor"></div></div>\
<div class="Eleditor-textStyle-item"><div class="Eleditor-textStyle-fontSize"></div></div>\
<div class="Eleditor-textStyle-item"><div class="Eleditor-textStyle-lineHeight"></div></div>\
<div class="Eleditor-textStyle-item">\
<div class="Eleditor-textStyle-align Eleditor-textStyle-alignLeft" align="left"></div>\
</div>\
<div class="Eleditor-textStyle-item">\
<div class="Eleditor-textStyle-align Eleditor-textStyle-alignCenter" align="center">\
</div>\
</div>\
<div class="Eleditor-textStyle-item">\
<div class="Eleditor-textStyle-align Eleditor-textStyle-alignRight" align="right">\
</div>\
</div>\
<div class="Eleditor-textStyle-item Eleditor-textStyle-item-upImg">\
<div class="Eleditor-textStyle-upImg"></div>\
</div>\
</div>\
<div class="Eleditor-textEditor-colors">\
<div class="Eleditor-textEditor-modulePane"><span></span></div>\
<ul>\
<li><span style="background-color:#232323;"></span></li>\
<li><span style="background-color:#2196F3;"></span></li>\
<li><span style="background-color:#795548;"></span></li>\
<li><span style="background-color:#00BCD4;"></span></li>\
<li><span style="background-color:#4CAF50;"></span></li>\
<li><span style="background-color:#E666E5;"></span></li>\
<li><span style="background-color:#FF9800;"></span></li>\
<li><span style="background-color:#FF5722;"></span></li>\
<li><span style="background-color:#ff2a1a;"></span></li>\
<li><span style="background-color:#FFEB3B;"></span></li>\
<li><span style="background-color:#ffffff;border: 1px solid #ccc;"></span></li>\
<li>\
<span class="Eleditor-inheritValue" style="background-color:transparent; border: 1px solid #dedede;">\
</span>\
</li>\
</ul>\
</div>\
<div class="Eleditor-textEditor-fontsizes">\
<div class="Eleditor-textEditor-modulePane"><span>字体大小</span></div>\
<ul>\
<li class="Eleditor-inheritValue">默认</li>\
<li>14px</li>\
<li>16px</li>\
<li>20px</li>\
<li>28px</li>\
<li>35px</li>\
</ul>\
</div>\
<div class="Eleditor-textEditor-lineheight">\
<div class="Eleditor-textEditor-modulePane"><span>行高</span></div>\
<ul>\
<li class="Eleditor-inheritValue">默认</li>\
<li>20px</li>\
<li>25px</li>\
<li>30px</li>\
<li>35px</li>\
<li>40px</li>\
</ul>\
</div>\
<div class="Eleditor-textEditor-linedecorations">\
<div class="Eleditor-textEditor-modulePane"><span>文本修饰</span></div>\
<ul>\
<li class="Eleditor-inheritValue">无</li>\
<li style="text-decoration: overline">上划线修饰</li>\
<li style="text-decoration: line-through">删除线修饰</li>\
<li style="text-decoration: underline">下划线修饰</li>\
</ul>\
</div>\
<div class="Eleditor-textEditor-formats">\
<div class="Eleditor-textEditor-format"></div>\
<div class="Eleditor-textEditor-clean"></div>\
</div>\
<div class="Eleditor-inputarea">\
<input placeholder="请输入超链接" type="text" />\
<div placeholder="点击输入内容" class="textarea" contenteditable="true"></div>\
</div>\
<div class="Eleditor-method">\
<button class="Eleditor-commit">提交</button>\
<button class="Eleditor-cancel">取消</button>\
</div>\
</div>\
<div class="Eleditor-delete-layer">\
<div class="Eleditor-delete-tip">进入批量删除模式,点击段落进行删除</div>\
<div class="Eleditor-delete-revoke"></div>\
<div class="Eleditor-delete-clear"></div>\
<div class="Eleditor-delete-back">返回继续编辑</div>\
</div>\
</div>';
return _html;
};
w[_namespace] = function(){
console.log('|--Eleditor Initing');
var _args = arguments[0];
_args.upload = _args.upload || {};
_args.toolbars = _args.toolbars || [],
// _undolen = isNaN(_args._undolen) ? 10 : _args._undolen;
_editorUid = _genEditorUid(),
_historys = [],
_placeHolder = _args.placeHolder || '<p class="Eleditor-placeholder">点击此处编辑内容</p>';
if( _args.toolbars.length === 0 ){
_args.toolbars = [
'insertText',
'editText',
'insertImage',
'insertLink',
'insertHr',
'delete',
'undo',
'cancel',
];
}
if( _args.el instanceof jQuery ){
var _$wrap = _args.el;
}else{
var _$wrap = $(_args.el);
if( _$wrap.length === 0 ){
return console.warn('|--Eleditor '+_args.el+'元素不存在,请在DOMContentLoaded后初始化Eleditor');
}else if( _$wrap.length != 1 ){
var _$wrap = $(_$wrap[0]);
}
}
if( _$wrap.attr('Eleditor-Inited') === 'true' ){
return console.warn('|--Eleditor '+_args.el+'已经绑定了Eleditor');
}
_$wrap.attr({'Eleditor-Inited': 'true', 'Eleditor-Uid': _editorUid});
_correctHtmlStructure(_$wrap, _placeHolder);
/*insert editor*/
var _lastScrollH = null;
var _$window = $(w);
var _$scrollWrap = $('html,body');
var _$editorWrap = $(_buildEditorModule(_args.toolbars, _editorUid));
var _$editorController = _$editorWrap.find('.Eleditor-controller');
var _$editorLoadingMask = _$editorWrap.find('.Eleditor-loading');
var _$editorTextModule = _$editorWrap.find('.Eleditor-textEditor');
var _$editorTextArea = _$editorTextModule.find(".Eleditor-inputarea .textarea");
var _$editorUploadImageBtn = _$editorController.find(".Eleditor-insertImage");
var _$editorBarUploadImageBtn = _$editorTextModule.find('.Eleditor-textStyle-item-upImg');
var _$editorTextLinkArea = _$editorTextModule.find(".Eleditor-inputarea input");
var _$editorColorModule = _$editorTextModule.find(".Eleditor-textEditor-colors");
var _$editorFontsizeModule = _$editorTextModule.find(".Eleditor-textEditor-fontsizes");
var _$editorUndoBtn = _$editorWrap.find(".Eleditor-undo");
var _$editorLineheightModule = _$editorTextModule.find(".Eleditor-textEditor-lineheight");
var _$editorLinedecorationsModule = _$editorTextModule.find(".Eleditor-textEditor-linedecorations");
var _$editorDeleteLayer = _$editorWrap.find(".Eleditor-delete-layer");
_$wrap.addClass('Eleditor-area');
_$wrap.after(_$editorWrap);
console.log('|--Eleditor Mounted To', _$wrap);
/*bindEvent*/
var _$selected = null,
_imageUploader = null;
var _showEditorControllerLayer = function(_$e){
_$selected = _$e;
_$e.addClass('Eleditor-active');
var _calTop = _$e.offset().top + _$e.outerHeight();
$.each(_$editorController.find('li'), function(i, e){
var _$e = $(e),
_tgs = _$e.attr('bind-tags');
if( _tgs ){
_tgs = _tgs.toLocaleLowerCase().split(',');
if( _inArray(_$selected[0].tagName.toLocaleLowerCase(), _tgs) ){
_$e.show();
}else{
_$e.hide();
}
}
});
_$editorController.show();
_flushEditorControllerLayerPosi();
if( typeof _$scrollWrap.animate === 'function' ){
_$scrollWrap.stop().animate({scrollTop: (_calTop - 150) + 'px'}, 500);
}else{
_$scrollWrap.scrollTop((_calTop - 150) + 'px');
}
_imageUploader && _imageUploader.refresh();
};
var _flushEditorControllerLayerPosi = function(){
if( _$selected ){
_$editorController.css({
top: _$selected.offset().top + _$selected.outerHeight(),
width: _$wrap.width() - 5
});
}
},
_hideEditorControllerLayer = function(){
_$wrap.find('.Eleditor-active').removeClass('Eleditor-active');
_$editorController.hide();
_$selected = null;
};
var _showEditorDeleteLayer = function(){
_flushEditorDeleteLayerHistoryBtn();
_$wrap.addClass('Eleditor-deleteMode');
_$editorDeleteLayer.show();
},
_flushEditorDeleteLayerHistoryBtn = function(){
if( _historys.length > 0 ){
_$editorWrap.find('.Eleditor-delete-revoke').removeClass('Eleditor-delete-revoke-disabled')
}else{
_$editorWrap.find('.Eleditor-delete-revoke').addClass('Eleditor-delete-revoke-disabled')
}
},
_hideEditorDeleteLayer = function(){
_$wrap.removeClass('Eleditor-deleteMode');
_$editorDeleteLayer.hide();
};
var _showEditorWrapMask = function(){
_$editorController.hide();
_$editorWrap.addClass('Eleditor-mask');
_lastScrollH = _$window.scrollTop();
_$scrollWrap.addClass('Eleditor-scrollLocked');
},
_hideEditorWrapMask = function(){
_$editorWrap.removeClass('Eleditor-mask');
_$scrollWrap.removeClass('Eleditor-scrollLocked');
_$window.scrollTop(_lastScrollH);
};
var _showLoadingMask = function(){
_showEditorWrapMask();
_$editorLoadingMask.show();
_$editorLoadingMask.html('<p>'+arguments[0]+'</p>')
},
_hideLoadingMask = function(){
_hideEditorWrapMask();
_$editorLoadingMask.hide();
};
var _appendHistory = function(){
_historys.push( _$wrap.html() );
// if( _historys.length > _undolen ){
// _historys.splice(0, 1)
// }
_flushHistoryBtn();
_flushEditorDeleteLayerHistoryBtn();
return true;
},
_revokeEdit = function(){
if( _historys.length === 0 ){
return;
}
_$wrap.html(_historys.pop());
_flushHistoryBtn();
_flushEditorDeleteLayerHistoryBtn();
_hideEditorControllerLayer();
},
_flushHistoryBtn = function(){
if( _historys.length == 0 ){
_$editorUndoBtn.hide();
}else{
_$editorUndoBtn.show();
}
};
var _syncRenderTextEditorView = function(){
_$editorTextModule.attr('role', 'edit').show();
_$editorTextArea.html( _$selected.hasClass('Eleditor-placeholder') ? '' : _$selected.html() );
_$editorTextArea.attr('style', _$selected.attr('style'));
if( _$selected.css('font-weight') == 'bold' ){
_$editorTextModule.find('.Eleditor-textStyle-bold').addClass('Eleditor-active');
}
if( _inArray(_$selected.css('text-decoration'), ['overline', 'line-through', 'underline']) ){
_$editorTextModule.find('.Eleditor-textStyle-linedecoration').addClass('Eleditor-active');
}
if( _$selected[0].tagName == 'A' ){
_$editorTextModule.attr('type', 'link');
_$editorTextLinkArea.val(_$selected.attr('href'));
}else{
_$editorTextModule.attr('type', 'word');
}
var _selectAlign = _$selected.css('text-align');
if( _inArray(_selectAlign, ['left', 'center', 'right']) ){
_$editorTextModule.find('.Eleditor-textStyle-align[align='+_selectAlign+']').addClass('Eleditor-active');
}else{
_$editorTextModule.find('.Eleditor-textStyle-align').removeClass('Eleditor-active');
}
_$editorTextModule.find('.Eleditor-textStyle-color span').css('background-color', _$selected.css('color'));
};
if( typeof WebUploader != 'undefined' && typeof _args.uploader != 'function' ){
//controller
_imageUploader = WebUploader.create({
auto: true, server: _args.upload.server || '/upload',
pick: _$editorUploadImageBtn, duplicate: true, resize: false,
fileSingleSizeLimit: _args.upload.fileSizeLimit ? _args.upload.fileSizeLimit*1024*1024 : undefined,
accept: Object.assign({
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png,webp',
mimeTypes: 'image/gif,image/jpg,image/jpeg,image/bmp,image/png,image/webp'
}, _args.upload.accept || {}),
fileVal: _args.upload.formName,
});
_imageUploader.on( 'uploadStart', function( _file, _percentage ) {
_hideEditorControllerLayer();
_showLoadingMask('上传图片中<span id="uploadProgress">1</span>%');
});
_imageUploader.on( 'uploadProgress', function( _file, _percentage ) {
$('#uploadProgress').html( parseFloat((_percentage * 100).toFixed(2)) );
});
_imageUploader.on( 'error', function() {
if( arguments[0]=="Q_TYPE_DENIED" ) w.alert("请上传图片格式文件");
if( arguments[0]=="F_EXCEED_SIZE" ) w.alert("文件大小不能超过"+(arguments[1] / 1048576)+"M");
});
_imageUploader.on( 'uploadComplete', function() { _hideLoadingMask(); });
_imageUploader.on( 'uploadSuccess', function( _file, _call ) {
var _hasStyleBarBtn = _file.source._refer[0].className.indexOf('Eleditor-textStyle-item-upImg') >= 0;
if( _call.status == 1 ){
if( _hasStyleBarBtn ){
_$editorTextArea.append('<img src="'+_call.url+'">');
}else{
_appendHistory();
_$selected.after( $('<img src="'+_call.url+'">') );
if( _$selected.hasClass('Eleditor-placeholder') ){
_$selected.remove();
}
}
}else{
w.alert('上传失败:['+_call.msg+']');
}
});
_imageUploader.addButton({ id: _$editorBarUploadImageBtn });
_$editorBarUploadImageBtn.addClass('Eleditor-webUploader-btn');
}else if( typeof _args.uploader == 'function' ){
var _uploaderHanlder = function(){
var _hasStyleBarBtn = $(this).hasClass('Eleditor-textStyle-item-upImg');
try{
_args.uploader.call(this).then(function(_url){
if( _hasStyleBarBtn ){
_$editorTextArea.append('<img src="'+_url+'">');
}else{
_appendHistory();
_$selected.after( $('<img src="'+_url+'">') );
if( _$selected.hasClass('Eleditor-placeholder') ){
_$selected.remove();
}
}
}, function(_err){
w.alert('上传失败:['+_err+']');
});
}catch(_e){
console.warn(_e);
console.warn('|--Eleditor 请检查uploader函数返回是否是标准Promise对象!');
}
}
_$editorUploadImageBtn.click(_uploaderHanlder);
_$editorBarUploadImageBtn.click(_uploaderHanlder);
}else{
_$editorBarUploadImageBtn.addClass('Eleditor-textStyle-item-upImg-disabled')
}
var _editorModuleEvents = {
insertText: function(){
_showEditorWrapMask();
_$editorTextModule.attr({'role': 'insert', 'type': 'word'}).show();
},
insertLink: function(){
_showEditorWrapMask();
_$editorTextModule.attr({'role': 'insert', 'type': 'link'}).show();
},
insertImage: function(){
if( typeof WebUploader === 'undefined' && typeof _args.uploader != 'function' ){
window.alert('上传参数未定义.');
}
},
insertHr: function(){
_appendHistory();
var _$hr = $('<div class="horizontal-line" style="padding: 10px 0;border-bottom: 1px solid #aaa;margin-bottom: 20px;"></div>');
_$selected.after(_$hr);
_hideEditorControllerLayer();
},
editText: function(){
if( _inArray(_$selected[0].tagName, _notctname) ){
return this.insertText();
}
_showEditorWrapMask();
_syncRenderTextEditorView();
},
"delete": function(){
if( _$wrap.find('*').length == 1 ){
_appendHistory();
_$selected.remove();
}else{
_showEditorDeleteLayer();
}
_hideEditorControllerLayer();
_correctHtmlStructure(_$wrap, _placeHolder);
},
undo: function(){
_revokeEdit();
},
cancel: function(){
_hideEditorControllerLayer();
}
};
for (var i = 0; i < _args.toolbars.length; i++) {
if( typeof _args.toolbars[i] === 'object' ){
_editorModuleEvents[_args.toolbars[i].id] = _args.toolbars[i].handle;
}
};
/*text area click*/
_$window.on('resize', function(){
_flushEditorControllerLayerPosi();
});
_$editorController.on('click', 'ul li', function() {
var _$this = $(this),
_event = _$this.attr('event');
if( typeof _editorModuleEvents[_event] === 'function' ){
if( typeof _toolnames[_event] != 'undefined' ){
_editorModuleEvents[_event]();
}else{
_editorModuleEvents[_event](_$selected, _$this) !== false && _editorModuleEvents.cancel();
}
}
});
_$editorWrap.on('click', '.Eleditor-delete-revoke', function() {
_revokeEdit();
});
_$editorDeleteLayer.on('click', '.Eleditor-delete-clear', function() {
if( !confirm('确定清空内容吗?') ){
return;
}
var _$cloneNode = _$wrap.clone();
_$cloneNode.find('.Eleditor-placeholder').remove();
if( _formatInnerText(_$cloneNode.text()) != '' ){
_appendHistory();
_$wrap.html('');
_correctHtmlStructure(_$wrap, _placeHolder);
}
});
_$editorDeleteLayer.on('click', '.Eleditor-delete-back', function() {
_hideEditorDeleteLayer();
});
/*textEditor*/
_$editorTextModule.on('click', '.Eleditor-textStyle-bold', function() {
_$editorTextArea.css("font-weight", $(this).hasClass("Eleditor-active") ? "normal" : "bold");
$(this).toggleClass("Eleditor-active");
});
_$editorTextModule.on('click', '.Eleditor-textStyle-linedecoration', function() {
_$editorLinedecorationsModule.show();
$(this).addClass('Eleditor-active');
});
_$editorTextModule.on('click', '.Eleditor-textStyle-color,.Eleditor-textStyle-bgColor', function() {
var _$this = $(this);
var _role = _$this.hasClass('Eleditor-textStyle-bgColor') ? 'bgcolor' : 'color';
_$editorColorModule.find('.Eleditor-textEditor-modulePane span').html(_role == 'bgcolor' ? '文字背景颜色' : '文字颜色');
_$editorColorModule.attr('role', _role).show();
$(this).addClass('Eleditor-active');
});
_$editorTextModule.on('click', '.Eleditor-textStyle-fontSize', function() {
_$editorFontsizeModule.show();
$(this).addClass('Eleditor-active');
});
_$editorTextModule.on('click', '.Eleditor-textStyle-lineHeight', function() {
_$editorLineheightModule.show();
$(this).addClass('Eleditor-active');
});
_$editorLinedecorationsModule.on('click', 'ul li', function() {
if( !$(this).hasClass('Eleditor-inheritValue') ){
_$editorTextArea.css("text-decoration", $(this).css('text-decoration'));
}else{
_$editorTextArea.css("text-decoration", 'inherit');
_$editorTextModule.find('.Eleditor-textStyle-linedecoration').removeClass('Eleditor-active');
}
_$editorLinedecorationsModule.hide();
});
_$editorLineheightModule.on('click', 'ul li', function() {
if( !$(this).hasClass('Eleditor-inheritValue') ){
_$editorTextArea.css("line-height", $(this).html());
}else{
_$editorTextArea.css("line-height", 'inherit');
_$editorTextModule.find('.Eleditor-textStyle-lineHeight').removeClass('Eleditor-active');
}
_$editorLineheightModule.hide();
});
_$editorFontsizeModule.on('click', 'ul li', function() {
if( !$(this).hasClass('Eleditor-inheritValue') ){
_$editorTextArea.css("font-size", $(this).html());
}else{
_$editorTextArea.css("font-size", 'inherit');
_$editorTextModule.find('.Eleditor-textStyle-fontSize').removeClass('Eleditor-active');
}
_$editorFontsizeModule.hide();
});
_$editorTextModule.on('click', ".Eleditor-textStyle-align", function() {
var _align = $(this).attr('align');
_$editorTextArea.css({"text-align": _align, "display": 'block'});
_$editorTextModule.find(".Eleditor-textStyle-align.Eleditor-active").removeClass('Eleditor-active');
$(this).addClass('Eleditor-active');
});
_$editorTextModule.on('click', ".Eleditor-textEditor-format", function() {
var _$cloneTextArea = _$editorTextArea,
_removeAttrs = 'style width height border bgcolor align color';
_$cloneTextArea.removeAttr(_removeAttrs);
$.each(_$cloneTextArea.find('*'), function(_i, _e) {
var _$eachElm = _$cloneTextArea.find(_e);
if( _inArray(_e.tagName.toLocaleLowerCase(), ['script', 'style']) ){
_$eachElm.remove();
}else{
_$eachElm.removeAttr(_removeAttrs);
}
});
_$editorTextArea.html(_$cloneTextArea.html());
_$editorTextModule.find('.Eleditor-active').removeClass('Eleditor-active');
});
_$editorTextModule.on('click', ".Eleditor-textEditor-clean", function() {
confirm('确定清空内容(不可恢复)?') && _$editorTextArea.html("");
});
_$editorTextModule.on('click', ".Eleditor-cancel,.Eleditor-commit", function() {
arguments[0].preventDefault();
if( $(this).hasClass('Eleditor-commit') ){
var _style = _$editorTextArea.attr('style') || '';
var _content = _$editorTextArea.html();
var _editAct = _$editorTextModule.attr('role') == 'edit';
var _hasPlaceHolder = _$selected.hasClass('Eleditor-placeholder');
if( !_content ){
return alert('请输入内容文字');
}
_appendHistory();
if( _editAct || (_hasPlaceHolder && _$editorTextModule.attr('type') != 'link') ){
if( _$editorTextModule.attr('type') == 'link' ){
_$selected.attr('href', _$editorTextLinkArea.val());
}
_$selected.attr('style', _style).removeClass('Eleditor-placeholder').html( _content );
}else{
var _buildWordHtml = '';
if( _$editorTextModule.attr('type') == 'link' ){
var _link = _$editorTextLinkArea.val();
_buildWordHtml = '<a style="'+_style+'" href="'+_link+'">'+_content+'</a>';
}else{
_buildWordHtml = '<p style="'+_style+'">'+_content+"</p>";
}
_$selected.after( $(_buildWordHtml) );
if( _hasPlaceHolder ){
_$selected.remove();
}
}
_flushEditorControllerLayerPosi();
}
_$editorTextModule.find('.Eleditor-active').removeClass('Eleditor-active');
_$editorTextModule.find('.Eleditor-textStyle-color span').removeAttr('style');
_$editorTextArea.removeAttr('style').html('');
_$editorTextLinkArea.val('');
_hideEditorWrapMask();
_$editorTextModule.hide();
_hideEditorControllerLayer();
});
_$editorColorModule.on('click', 'ul li span', function() {
var _color = $(this).css('background-color');
if( _$editorColorModule.attr('role') == 'color' ){
if( !$(this).hasClass('Eleditor-inheritValue') ){
_$editorTextArea.css("color", _color);
_$editorTextModule.find('.Eleditor-textStyle-color span').css("background-color", _color);
}else{
_$editorTextArea.css("color", 'inherit');
_$editorTextModule.find('.Eleditor-textStyle-color').removeClass('Eleditor-active').find('span').removeAttr('style');
}
}else{
if( !$(this).hasClass('Eleditor-inheritValue') ){
_$editorTextArea.css("background-color", _color);
}else{
_$editorTextArea.css("background-color", 'inherit');
_$editorTextModule.find('.Eleditor-textStyle-bgColor').removeClass('Eleditor-active');
}
}
_$editorColorModule.hide();
});
/*controller*/
_$wrap.on('click', '*', function(_e) {
var _$this = $(this);
if( _$wrap.hasClass('Eleditor-deleteMode') ){
if( !_$this.hasClass('Eleditor-placeholder') ){
_appendHistory();
if( typeof _$this.fadeOut === 'function' ){
_$this.fadeOut('fast', function(){
_$this.remove();
_correctHtmlStructure(_$wrap, _placeHolder);
});
}else{
_$this.remove();
_correctHtmlStructure(_$wrap, _placeHolder);
}
}
}else if( !_$this.hasClass('Eleditor-active') ){
_hideEditorControllerLayer();
_hideEditorDeleteLayer();
_showEditorControllerLayer(_$this);
}
return _e.preventDefault() == 0;
});
return {
clear: function(){
_$wrap.html('');
_correctHtmlStructure(_$wrap, _placeHolder);
},
revoke: function(){
_revokeEdit();
},
append: function(){
_hideEditorControllerLayer();
var _object = arguments[0];
if( !_object ){
return;
}
var _$content = $(_object);
if( typeof _object == 'string' && _$content.length == 0 ){
_$content = $('<p>'+_object+'</p>');
}
if( _formatInnerText(_$content.text()) == '' ){
return;
}
_$wrap.find('.Eleditor-placeholder').remove();
_appendHistory();
return _$wrap.append(_$content);
},
trigger: function(){
var _event = arguments[0];
if( _event == 'insertText' ){
_$selected = _$wrap.find('>:last');
_editorModuleEvents.insertText();
}else if( _event == 'insertLink' ){
_$selected = _$wrap.find('>:last');
_editorModuleEvents.insertLink();
}
_hideEditorControllerLayer();
},
saveState: function(){
return _appendHistory();
},
getEditNode: function(){
return _$selected;
},
getContent: function(){
var _$cloneNode = _$wrap.clone();
_$cloneNode.find('.Eleditor-placeholder').remove();
return _formatInnerText(_$cloneNode.html());
},
getContentText: function(){
var _$cloneNode = _$wrap.clone();
_$cloneNode.find('.Eleditor-placeholder').remove();
return _formatInnerText(_$cloneNode.text());
},
destory: function(){
_$wrap.removeAttr('Eleditor-Inited Eleditor-Uid');
_$wrap.removeClass('Eleditor-area');
_$wrap.find('.Eleditor-placeholder').remove()
_$wrap.off().find('.Eleditor-active').removeClass('Eleditor-active');
_$editorWrap.find('*').off();
_$editorWrap.remove();
console.log('|--Eleditor '+_editorUid+' destoryed');
}
}
}
})(window);
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化