jquery-自己写的editor编辑器仅供参考

最新推荐文章于 2024-08-08 08:13:00 发布
优良子弟
最新推荐文章于 2024-08-08 08:13:00 发布
阅读量2k
点赞数
文章标签： js jquery editor
本文链接：https://blog.csdn.net/q1596948728/article/details/38090447
版权
sEditorConfig = {
	selector: "textarea",
	uploadJson: "/upload/submit"
};

sDialog = {};
sDialog.beforeCreate = function(id) {return id;};
sDialog.endCreate = function(ev) {};
sDialog.create = function(options) {
	var self = $('#'+options.id);
	if (self.size() > 0) {
		self.trigger('open'); return self;
	}
	
	self = $('<div>').addClass('sdialog sdialog-window').append([
		'<div class="sdialog-header">'+ options.title +'<span class="sdialog-icon-close" title="关闭"></span></div>',
		'<div class="sdialog-body"></div>',
		'<div class="sdialog-footer"><input type="button" value="确定" class="sdialog-button sdialog-button-yes" /> <input type="button" value="取消" class="sdialog-button sdialog-button-no" /></div>'
	].join(''));
	
	if (options.id) {self.attr('id', options.id);}
	if (options.width) {self.css('width', options.width);}
	if (options.height) {self.css('height', options.height);}
	
	self.appendTo(document.body);
	$('.sdialog-body', self).html(options.html);
	
	$('.sdialog-icon-close', self).bind('click', function() {
		self.remove();
	});
	
	if (typeof options.init == 'function') {
		options.init.call(this, self);
	}
	
	$('.sdialog-button-yes', self).bind('click', function() {
		options.callback.call(this, self);
		self.trigger('close');
	});
	
	$('.sdialog-button-no', self).bind('click', function() {
		self.trigger('close');
	});
	
	self.bind('open', function() {
		sDialog.closeAll(this);
		var w = $(this).outerWidth();
		var h = $(this).outerHeight();
		var x = $(document).scrollLeft() + ($(window).width() - w) / 2;
		var y = $(document).scrollTop() + ($(window).height() - h) / 2;
		$(this).css({"left" : x, "top" : y}).draggable({handle: '.sdialog-header'}).show();
	});
	self.bind('close', function() {
		$(this).hide();
	});
	self.trigger('open');
	return self;
};

sDialog.beforePopup = function(id) {return id;};
sDialog.endPopup = function(ev) {};
sDialog.popup = function(options) {
	var self = $('#'+options.id);
	if (self.size() > 0) {
		self.trigger('open'); return self;
	}
	
	self = $('<div>').addClass('sdialog').append([
		'<div class="sdialog-popup">',
		'<div class="caret"></div>',
		'</div>'
	].join(''));
	
	if (options.id) {self.attr('id', options.id);}
	if (options.width) {self.css('width', options.width);}
	if (options.height) {self.css('height', options.height);}
	
	self.appendTo(document.body);
	$('.sdialog-popup', self).append(options.html);
	
	var dom = options.ev;
	var p = dom.parent();	
	
	if (typeof options.init == 'function') {
		options.init.call(this, self);
	}
	
	self.bind('open', function() {
		sDialog.closeAll(this);
		var position = {
			"top": p.offset().top + p.outerHeight(),
			"left": dom.offset().left
		};
		$(this).css(position).show(); 
		$('.sdialog-popup .caret', this).css("left", dom.outerWidth() / 2);
	});
	
	self.bind('close', function() {
		$(this).hide();
	});
	
	self.trigger('open');
	return self;
};

sDialog.closeAll = function(filter) {
	$('.sdialog').not(filter).trigger('close');
};

sDialog.showMsg = function(msg) {
	alert(msg);
}

sUbb = {};
sUbb.compile = {};
sUbb.compile.img = function(url) {return '[img]'+ url +'[/img]';}
sUbb.compile.video = function(url) {return '[video]'+ url +'[/video]';}
sUbb.compile.emoticon = function(k) {return '[emoticon='+ k +' /]';}
sUbb.compile.audio  = function(url) {return '[audio]'+ url +'[/audio]';}
sUbb.compile.file  = function(url) {return '[file]'+ url +'[/file]';}

$(document).ready(function() {
	$('.warp_bottom_reply').bind('init', function() {
		var that = $(this);
		$(this).data('basePath', (function() {
			var ev = $('script[src$="/js/editor.js"]');
			if (ev.size() > 0) {
				var src = ev.attr('src');
				return src.substring(0, src.lastIndexOf('/') - 3);
			}
			return '';
		})());
		
		if ($(that).data('basePath')  == '') {
			throw '抱歉，编辑器初始化失败。'; return;
		}
		
		(function() {
			if ($('script[src*="jquery.insertAtCaret.js"]').size() < 1) {
				var _src = $(that).data('basePath') + '/js/jquery.insertAtCaret.js';
				//$.getScript(_src, function() {
					$('head', document).eq(0).append('<script type="text/javascript" src="'+ _src +'"></script>');
				//});
			}
		})();
		
		$(document).bind('click', function(e) {
		//$(document).on('click', function() {
			var evs = $('.sdialog:not(.sdialog-window)');
			if (evs.size() < 1) {
				return;
			}
			
			var self = $(e.target);
			var that = self.is('.sdialog') ? self : self.closest('.sdialog');
			if (that.size() > 0) {
				evs.not(that).trigger('close'); return;
			}
			evs.trigger('close');
		});
		
		
		//插入图片
		$(this).bind('dialogPic', function(ev, dom, fn) {
			sDialog.endPopup(sDialog.popup({
				"id": sDialog.beforePopup('sDialog-upload-pic'),
				"width": '240px',
				"ev": $(dom),
				"html": [
					'<div class="sdialog-upload"><ul>',
					'<li class="from-local"><a href="#"></a></li>',
					'<li class="from-remote"><a href="#"></a></li>',
					'</ul></div>'
				].join(''),
				"init": function(ev) {
					var lis = $('.sdialog-upload ul li', ev);
					lis.filter('.from-local').bind('click', function() {
						that.trigger('dialogPicLocal', [function(data) {
							fn.call(this, data);
						}]);
						$(ev).trigger('close');
						return false;
					});
					
					lis.filter('.from-remote').bind('click', function() {
						that.trigger('dialogPicWeb', [function(data) {
							fn.call(this, data);
						}]);
						$(ev).trigger('close');
						return false;
					});
				}
			}));
		});
		
		//插入本地图片
		$(this).bind('dialogPicLocal', function(ev, fn) {
			sDialog.endCreate(sDialog.create({
				"id": sDialog.beforeCreate('sDialog-upload-pic-local'),
				"width": "680px",
				"title": '上传本地图片',
				"html": [
					'<div class="sdialog-upload-body">',
					'<div class="sdialog-upload-container">',
					'<ul>',
					'<li>',
					'<div class="sdialog-upload-add">',
					'<form method="post" enctype="multipart/form-data" action="'+ sEditorConfig.uploadJson +'"><input name="imgfile" type="file" title="添加图片" /></form>',
					'</div>',
					'</li>',
					'</ul>',
					'</div>',
					'</div>'
				].join(''),
				
				"init": function(ev) {
					if ($('script[src*="jquery.form.js"]').size() < 1) {
						var _src = $(that).data('basePath') + '/js/jquery.form.js';
						//$.getScript(_src, function() {
							$('head', document).eq(0).append('<script type="text/javascript" src="'+ _src +'"></script>');
						//});
					}
					
					var _ipt = $('.sdialog-upload-add :input[type="file"]', ev);
					_ipt.bind('change', function() {
						var _box = $('<li>').html('<a href="javascript:void(0)"><img src="'+ $(that).data('basePath') +'/images/editor/loading.gif" /><span title="移除">×</span></a>');
						$(this).closest('li').before(_box);
						$('span', _box).bind('click', function() {
							$(this).parent().parent().remove(); return false;
						});
						
						var _theform = $(this).closest('form');
						_theform.ajaxSubmit({
							"dataType": "jsonp",
							"success": function(json) {
								_theform.resetForm();
								if (json.status < 1) {
									sDialog.showMsg(json.msg);
									$('span', _box).trigger('click');
									return;
								}
								$('img', _box).attr('src', json.url).parent().attr({"href": json.url, "target": "_blank"});
							},
							"error": function(r, s, t) {
								sDialog.showMsg('抱歉上传失败'); $('span', _box).trigger('click');
							}
						});
					});
				},
				
				"callback": function(ev) {
					var result = [];
					$('.sdialog-upload-container ul li img', ev).each(function() {
						result.push($(this).attr('src'));
					});
					fn.call(this, result);
					$('.sdialog-upload-container ul li:not(:last)', ev).remove();
					$(ev).trigger('close');
				}
			}));
		});
		
		//插入网络图片
		$(this).bind('dialogPicWeb', function(ev, fn) {
			sDialog.endCreate(sDialog.create({
				"id": sDialog.beforeCreate('sDialog-upload-pic-web'),
				"width": "680px",
				"title": '插入网络图片',
				"html": [
					'<div class="sdialog-upload-body">',
					'<div class="sdialog-upload-head">',
					'<input type="text" value="" placeholder="请粘贴图片地址" class="sdialog-input-text" style="width:80%;" /> ',
					'<input type="button" value="添加" class="sdialog-button" /> ',
					'</div>',
					'<div class="sdialog-upload-container">',
					'<p>暂未添加图片</p>',
					'</div>',
					'</div>'
				].join(''),
				"init": function(ev) {
					$('.sdialog-upload-head .sdialog-button', ev).bind('click', function() {
						var _container = $('.sdialog-upload-container', ev);
						if ($('ul li', _container).size() < 1) {
							_container.html('<ul></ul>');
						}
						
						var _input = $(this).prev(':input');
						var _src = _input.val();
						if (!/^[\w-]{3,}:\/\/[\w-]+(\.[\w-]+)+(:\d{1,6})?\//.test(_src)) {
							sDialog.showMsg('抱歉，图片URL地址不正确。');
							_input.focus();
							return false;
						}
						
						var _box = $('<li>').html('<a href="'+ _src +'" target="_blank"><img src="'+ _src +'" /><span title="移除">×</span></a>');
						_box.appendTo($('ul', _container));
						_input.val('');//.focus();
						$('span', _box).bind('click', function() {
							$(this).parent().parent().remove(); return false;
						});
					});
				},
				
				"callback": function(ev) {
					var result = [];
					$('.sdialog-upload-container ul li img', ev).each(function() {
						result.push($(this).attr('src'));
					});
					fn.call(this, result);
					$('.sdialog-upload-container', ev).html('<p>暂未添加图片</p>');
					$(ev).trigger('close');
				}
			}));
		});
		
		//插入视频
		$(this).bind('dialogVideo', function(ev, dom, fn) {
			sDialog.endPopup(sDialog.popup({
				"id": sDialog.beforePopup('sDialog-video'),
				"width": '450px',
				"ev": $(dom),
				"html": [
					'<div class="sdialog-body">',
					'<p>',
					'<input type="text" value="" placeholder="请输入视频地址" class="sdialog-input-text sdialog-input-text-medium" /> ',
					'<input type="button" value="添加" class="sdialog-button" /> ',
					'</p>',
					'</div>'
				].join(''),
				"init": function(ev) {
					$('.sdialog-body :input.sdialog-button', ev).bind('click', function() {
						var _input = $('.sdialog-body :input.sdialog-input-text', ev);
						var _url = _input.val();
						if (!/^[\w-]{3,}:\/\/[\w-]+(\.[\w-]+)+(:\d{1,6})?\//.test(_url)) {
							sDialog.showMsg('抱歉，视频URL地址不正确。');
							_input.focus();
							return false;
						}
						fn.call(this, {"url": _url});
						_input.val('');
						$(ev).trigger('close');
					});
				}
			}));
		});
		
		//插入表情
		$(this).bind('dialogPhiz', function(ev, dom, fn) {
			var _htm  = ['<div class="sdialog-emoticons"><table width="100%" border="0" cellspacing="0" cellpadding="4">'];
			var x = 6, y = 9;
			var path = that.data('basePath') + '/images/editor/emoticons/';
			for (var i = 1; i <= x; i++) {
				_htm.push('<tr>');
				for (var j = 1; j <= y; j++) {
					_htm.push('<td><img src="'+ path + ((i - 1) * y + j) +'.gif" /></td>');
				}
				_htm.push('</tr>');
			}
			_htm.push('</table></div>');
			sDialog.endPopup(sDialog.popup({
				"id": sDialog.beforePopup('sDialog-phiz'),
				"width": "360px",
				"ev": $(dom),
				"html": _htm.join(''),
				"init": function(ev) {
					$('table tr td', ev).hover(function() {$(this).addClass('on');}, function() {$(this).removeClass();}).bind('click', function() {
						var src = $('img', this).attr('src');
						var b = src.lastIndexOf('/') + 1;
						var e = src.lastIndexOf('.');
						fn.call(this, {
							"value": src.substring(b, e)
						});
						$(ev).trigger('close');
					});
				}
			}));
		});
		
		//插入音频
		$(this).bind('dialogAudio', function(ev, dom, fn) {
			sDialog.endPopup(sDialog.popup({
				"id": sDialog.beforePopup('sDialog-audio'),
				"width": '450px',
				"ev": $(dom),
				"html": [
					'<div class="sdialog-body">',
					'<p>',
					'<input type="text" value="" placeholder="请输入音频地址" class="sdialog-input-text sdialog-input-text-medium" /> ',
					'<input type="button" value="添加" class="sdialog-button" /> ',
					'</p>',
					'</div>'
				].join(''),
				"init": function(ev) {
					$('.sdialog-body :input.sdialog-button', ev).bind('click', function() {
						var _input = $('.sdialog-body :input.sdialog-input-text', ev);
						var _url = _input.val();
						if (!/^[\w-]{3,}:\/\/[\w-]+(\.[\w-]+)+(:\d{1,6})?\//.test(_url)) {
							sDialog.showMsg('抱歉，音乐URL地址不正确。');
							_input.focus();
							return false;
						}
						
						fn.call(this, {"url": _url});
						_input.val('');
						$(ev).trigger('close');
					});
				}
			}));
		});
		
		//插入附件
		$(this).bind('dialogFile', function(ev, dom, fn) {
			sDialog.endPopup(sDialog.popup({
				"id": sDialog.beforePopup('sDialog-file'),
				"width": '450px',
				"ev": $(dom),
				"html": [
					'<div class="sdialog-body">',
					'<p>',
					'<input type="text" value="" placeholder="请输入附件地址" class="sdialog-input-text sdialog-input-text-medium" /> ',
					'<input type="button" value="添加" class="sdialog-button" /> ',
					'</p>',
					'</div>'
				].join(''),
				"init": function(ev) {
					$('.sdialog-body :input.sdialog-button', ev).bind('click', function() {
						var _input = $('.sdialog-body :input.sdialog-input-text', ev);
						var _url = _input.val();
						if (!/^[\w-]{3,}:\/\/[\w-]+(\.[\w-]+)+(:\d{1,6})?\//.test(_url)) {
							sDialog.showMsg('抱歉，附件URL地址不正确。');
							_input.focus();
							return false;
						}
						
						fn.call(this, {"url": _url});
						_input.val('');
						$(ev).trigger('close');
					});
				}
			}));
		});
		
		
		$('.out-left-0', this).each(function() {
			var _span = $('span.icon', this);
			
			//插入图片
			if (_span.is('.icon-pic')) {
				$(this).bind('click', function() {
					that.trigger('dialogPic', [$(this), function(data) {
						var _htm = [];
						$.each(data, function(k, url) {
							_htm.push(sUbb.compile.img(url));
						});
						$(sEditorConfig.selector, that).insertAtCaret(_htm.join(''));
					}]);
					return false;
				});
			}
			
			//插入视频
			else if (_span.is('.icon-video')) {
				$(this).bind('click', function() {
					that.trigger('dialogVideo', [this, function(data) {
						$(sEditorConfig.selector, that).insertAtCaret(sUbb.compile.video(data.url));
					}]);
					return false;
				});
			}
			
			//插入表情
			else if (_span.is('.icon-phiz')) {
				$(this).bind('click', function() {
					that.trigger('dialogPhiz', [$(this), function(data) {
						$(sEditorConfig.selector, that).insertAtCaret(sUbb.compile.emoticon(data.value));
					}]);
					return false;
				});
			}
			
			//插入音频
			else if (_span.is('.icon-audio')) {
				$(this).bind('click', function() {
					that.trigger('dialogAudio', [this, function(data) {
						$(sEditorConfig.selector, that).insertAtCaret(sUbb.compile.audio(data.url));
					}]);
					return false;
				});
			}
			
			//插入附件
			else if (_span.is('.icon-file')) {
				$(this).bind('click', function() {
					that.trigger('dialogFile', [this, function(data) {
						$(sEditorConfig.selector, that).insertAtCaret(sUbb.compile.file(data.url));
					}]);
					return false;
				});
			}
		});
		
	}).trigger('init');
});
请保留作者版权：优良子弟 QQ：1596948728