基于可编辑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的带表情编辑器相关推荐

Mac自带文本编辑器TextEdit编辑大文件后打不开
前段时间用Mac自带文本编辑器编辑文本.把一段超过十万行的excel文本粘贴进去,然后就看着小圈圈转啊转-进入漫长等待,最后无奈command+Q.之后再打开文本编辑器都是直接提示崩溃,然后尝试重装这 ...
Thinkphp带表情的评论回复实例
Thinkphp带表情的评论回复实例基于Thinkphp开发的一个简单的带表情的评论回复实例,可以无限回复,适合新手学习或作为毕业设计作品等. 评论提交验证 1 $(".submit-bt ...
撸VUE弹窗组件 + 可编辑div 组件
现在我们先只看看已经实现的功能,下次再发布如何从写组件到发布npm,和其中遇到的一些坑都是实现一些简单的功能,代码量很小,其中还结合网上的一些比较优秀的代码,如果发现自己的一小部分代码也在里面,不要 ...
（二）Markdown编辑器的使用效果 | 以CSDN自带MD编辑器为例
CSDN自带Markdown编辑器使用指南 (一)Markdown编辑器的使用示例 | 以 CSDN自带MD编辑器为例 (二)Markdown编辑器的使用效果 | 以 CSDN自带MD编辑器为例 ...
在可编辑div中插入文字或图片的问题解决思路
最近在网上碰到一个人问了我一个问题,在可编辑div中插入文字或者图片.因为web在线编辑器我从来只是用,基本不会去研究源代码.后来正好一个在线聊天web项目中也要用到这个功能,我就特地看看了代码. 基 ...
微信小程序获取带表情的微信名乱码问题
微信小程序获取带表情的微信名乱码问题在后台获取完微信用户数据后,对微信名进行UTF-8编码 URLEncoder.encode(nickName, "utf-8") ,将编码后的 ...
WordPress自带TinyMCE编辑器增强技巧大全
原文地址: http://www.cmhello.com/wordpress-tinymce-custom-methods.html 有朋友反馈说,Hcms主题使用短代码时,总是需要复制短代码样式,然 ...
用java实现的文本编辑器可以媲美windows自带的编辑器吗？（功能全，超详细）
介绍 1.菜单栏(文本,编辑,格式,关于) 2.文本子菜单及其功能 3.编辑子菜单及其功能 4.格式子菜单及其功能 5.关于实现功能 1. 编辑器可以打开,保存,另存为,关闭文件. 2. 编辑器可以 ...
（一）Markdown编辑器的使用示例 | 以 CSDN自带MD编辑器为例
CSDN自带Markdown编辑器使用指南 (一)Markdown编辑器的使用示例 | 以 CSDN自带MD编辑器为例 (二)Markdown编辑器的使用效果 | 以 CSDN自带MD编辑器为例 ...

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

基于可编辑DIV的带表情编辑器相关推荐

最新文章

热门文章