admin 管理员组

文章数量: 1086866

基于可编辑DIV的带表情编辑器

效果图：

HTML代码：

<!DOCTYPE html>
<html>
<head><title>1111</title><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/><script type="text/javascript" charset="utf-8" src="js/jquery.js"></script><script type="text/javascript" charset="utf-8" src="DDeditor/plugins/smile/dialog/jQury.DDeditor.plugins.js"></script><link rel="stylesheet" type="text/css" href="DDeditor/skins/default/default.css">
</head>
<body><div style="width: 900px;margin:100px auto 0px auto;"><div><a class="smile" href="javascript:void(0);">smile</a></div><div class="editor" style="border: 1px solid #ccc;height:100px;" contenteditable="true"></div></div><div style="width: 900px;margin:0px auto;"><div><a class="smile" href="javascript:void(0);">smile</a></div><div class="editor" style="border: 1px solid #ccc;height:100px;" contenteditable="true"></div></div><div style="width: 900px;margin:0px auto;"><div><a class="smile" href="javascript:void(0);">smile</a></div><div class="editor" style="border: 1px solid #ccc;height:100px;" contenteditable="true"></div></div><div style="width: 900px;margin:0px auto;"><div><a class="smile" href="javascript:void(0);">smile</a></div><div class="editor" style="border: 1px solid #ccc;height:100px;" contenteditable="true"></div></div><script type="text/javascript">$(function(){$('.editor').DDeditor();});</script>
</body>
</html>

js代码：

jQuery.fn.extend({DDeditor : function(options){var smileItems = new Array();//表情图片集合for (var i=0;i<75;i++){smileItems[i] = (i+1) + '.gif';}var smleDescriptions = ['微笑','撇嘴','色','发呆','流泪','害羞','闭嘴','睡','大哭','尴尬','发怒','笑脸','呲牙','惊讶','难过','冷汗','抓狂','吐','偷笑','可爱','白眼','傲慢','饥饿','困','恐怖','流汗','憨笑','大兵','奋斗','咒骂','疑问','嘘...','晕...','折磨','衰...','敲打','再见','擦汗','抠鼻','糗大了','坏笑','左哼哼','右哼哼','哈欠','鄙视','委屈','快哭了','阴险','亲亲','吓...','可怜','拥抱','月亮','太阳','炸弹','骷髅','菜刀','猪头','西瓜','咖啡','米饭','爱心','赞','弱','握手','胜利','抱拳','勾引','ok','no','玫瑰','凋谢','示爱','爱情','飞吻'];var defaults = {smile_id : '.smile',smile_path : 'DDeditor/plugins/smile/images/',smile_items : smileItems,smile_descriptions : smleDescriptions};var option = $.extend(defaults,options);var smile = $(option.smile_id);var editor = $(this);cursors = [];$(this).each(function(){cursors.push(new Cursor(this))});smile.click(function(){var index = smile.index(this);var strFace,path,items,descriptions;path = option.smile_path;items = option.smile_items;descriptions = option.smile_descriptions;$('#faceBox').remove();strFace = '<div id="faceBox" style="position:absolute;display:none;z-index:1000;" class="qqFace">' +'<table border="0" cellspacing="0" cellpadding="0"><tr>';for(var i=0; i<items.length; i++){strFace += '<td><img onclick="cursors['+index+'].insertHTML(getImgStr($(this).attr(\'src\')))" alt="" src="'+path+items[i]+'" title="'+descriptions[i]+'"/></td>';if( (i+1) % 15 == 0 ) strFace += '</tr><tr>';}strFace += '</tr></table></div>';var faceBox = $(strFace);$(this).parent().append(strFace);var offset = $(this).position();var top = offset.top- 150;faceBox.css({'left': offset.left,'top' : top});$('#faceBox').fadeIn(500);return false;});//记录光标位置$(editor).click(function() {cursors[$(editor).index(this)].initRange();}).select(function() {cursors[$(editor).index(this)].initRange();return false;}).keyup(function() {cursors[$(editor).index(this)].initRange();return false;}).keydown(function(event) {//监听键盘回车键if (event.keyCode == 13 || event.charCode == 13) {cursors[$(editor).index(this)].insertHTML('<br/>');return false;}}); //隐藏表情区域$(document).click(function(){$('#faceBox').fadeOut(200,function(){$('#faceBox').remove();});});}
});
function getImgStr(src){return '<img alt="" src="'+src+'" />';
}function Cursor(a) {this.element = a;
}Cursor.prototype = {getRange : function() {if (document.selection) {return document.selection.createRange().duplicate();} else if (window.getSelection) {return window.getSelection().getRangeAt(0).cloneRange();}},initRange : function() {var oDoc = this.element;oDoc.range = new Cursor(oDoc).getRange();},insertHTML : function(html) {var oDoc = this.element;if (document.selection && !!oDoc.range) {var ierange = oDoc.range;//在非标准浏览器中 要先让你需要插入html的div 获得焦点oDoc.focus();ierange.pasteHTML(html);ierange.select();//把选区转换成对象，用以显示光标} else if (!!window.getSelection && !!oDoc.range) {var sel = window.getSelection();var w3cRange = oDoc.range;w3cRange.deleteContents();var node = $(html).get(0);w3cRange.insertNode(node);oDoc.focus();w3cRange.setStartAfter(node);w3cRange.collapse(true);sel.removeAllRanges();sel.addRange(w3cRange);} else {oDoc.focus();if (document.selection) {var ierange = oDoc.range = document.selection.createRange().duplicate();ierange.pasteHTML(html);//在光标位置插入html 如果只是插入text 则就是fus.text="..."oDoc.focus();} else {var sel = window.getSelection();var w3cRange = oDoc.range = sel.getRangeAt(0).cloneRange();w3cRange.deleteContents();var node = $(html).get(0);w3cRange.insertNode(node);w3cRange.setStartAfter(node);w3cRange.collapse(true);sel.removeAllRanges();sel.addRange(w3cRange);}}},getHTML : function() {return $(this.element).html();},formatDoc : function(sCmd, sValue) {document.execCommand(sCmd, false, sValue);this.element.focus();}
};

本文标签： 基于可编辑DIV的带表情编辑器

版权声明：本文标题：基于可编辑DIV的带表情编辑器 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1687958840a162098.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。