html添加qq表情插件(html 表情)

　　（点击上方公众号，可快速关注）

　　作者：伯乐在线专栏作者 - 陈被单

　　链接：https://web.jobbole.com/87278/

　　点击 → 了解如何加入专栏作者

　　前言：

　　由于公司开发项目需要用到表情插件，在网上百度了好久，很多表情插件，都是需要引用好多js文件，也没有现成的demo可以使用，还有一些插件是引用好多图片，每一个表情都要重新请求一下。为了这样一个功能，要引入好多js，img，也是得不偿失……

　　所以，博主自己码了一个小巧的“表情插件”，方便以后项目直接使用。

　　demo 地址：https://121.42.190.17/demo/emoji/src/demo.html

　　功能

　　功能：传递表情对应的字符格式到后台，后台返回字符串，前端将该字符串解析展示成相应的表情展示在页面上。

　　使用方法：

　　在option中配置需要的参数

　　varoption= {

　　emojiArray: ['angry'], //填写表情字符串的数组，【注：源文件image下面的图标，只需要写红框内的字符串，详见下图】

　　textareaId: 'emoji-editor', //输入框的id

　　loadId: 'load', //加载表情的id

　　emojiContainer: 'emojiContainer', //存储表情的容器对象

　　sendId: 'send', //发送信息的按钮 id

　　emojiTranslateCls:'emoji-comment', //需要转换成表情（img）的容器类名，只需要添加一个类，即可自动将:kissing_heart:渲染成表情~

　　};

　　/*调用方法*/

　　vartext= newEmoji(option);

　　text.init();

　　大致效果截图：（ui方面可以根据各自需要进行美化）

　　点击发送后，发送给后台的数据是：

　　表情插件的三个原理：

　　如何显示表情？

　　CSS Sprites(图片整合技术)，先设定好背景图标，然后定义每一个小图标的position，width，height，即可显示想要显示的表情。

　　期间遇到的问题：如何控制显示表情的大小？

　　首先想到的是background-size这个方法，但是要重新定义它的position，非常耗费“体力”，后来，柳暗花明，发现一个属性transform: scale(1.5); 控制当前元素缩放比率，哈哈，一行代码就搞定啦~想要表情大，还是小，尺寸不满意？通通一行代码搞定

　　如何在输入框中显示表情图标？

　　一开始是选择 input 的textarea，但是，将表情img “append”到这个输入框后面，也没有显示出这个图标，后来尝试了div，再“append”之后，发现能够成功显示表情，但是div又不能输入文字，无果……

　　初步想法：使用input监听，将textarea值实时加到div中，同样的，这个也是费力不讨好~继续探索……

　　后来发现一个很大众的属性。contenteditable=”true”，又愉快的选择了contenteditable。

　　一开始是用span承载表情图标，但是用div或者span标签放置图像，则contenteditable会默认加到最后的div/span中……，所以会导致输入表情图标后，再输入文字，最后的文字会在最后一个div/span中，导致没有显示文字。好吧……真是心累……

　　既然div/span 不可以，就使用img标签承载表情，这下终于能够正常输入了。

　　【contenteditable有一个问题，它支持富文本，不安全，而且用户体验不好。】

　　比如：用户粘贴的时候，会自动带格式，例子如下：

　　这边是采用网上大神的一段代码，去除掉富文本功能，具体参考：某大神博文

　　如何对图片和文字进行转换？

　　这时候就要使用强大的正则了，先用html（）获取内容，再对内容进行处理。

　　转换成文字：

　　content.replace(/<img\b[^>]*/,imgObj[j]) //匹配所有的<img />，替换成相应的格式

　　imgObj.push(format+ img[i].getAttribute("alt")+ format); //这里的format我使用的是： 所以就是类似这样 :fearful: 的格式

　　转换成图片：

　　varkeys= '\\+1|-1|100|109|1234|8ball|a|ab|abc|abcd|accept……' //这里只列出部分

　　regex= newRegExp(':('+ keys+ '):','g'), // 匹配格式形如这样子的格式 ：100：

　　$(obj[i]).html().replace(regex,emoji) //替换

　　functionemoji(){

　　varkey= arguments[1];

　　return'<img src="" alt="'+ key+ '"class="emoji emoji_'+ key+ '"/>'; //返回对应的img格式

　　}

　　整个插件的代码格式，也是比较常见的封装方式

　　//Emoji对象可变的属性

　　functionEmoji(option){

　　this.emoji= option.emojiArray,

　　this.textareaId= option.textareaId,

　　this.loadId= option.loadId,

　　this.sendId= option.sendId,

　　this.emojiContainer= option.emojiContainer,

　　this.emojiTranslateCls= option.emojiTranslateCls;

　　}

　　//每一次生成一个实例，上面的属性都会重新生成一次，这样对于固定的方法，会多占用一些内存。这样既不环保，也缺乏效率。所以可以把那些不变的属性和方法，直接定义在prototype对象上。这时所有固定的方法，其实都是同一个内存地址，指向prototype对象，因此就提高了运行效率。

　　Emoji.prototype= {

　　init: function(){ //放一些初始化的方法

　　this.toEmoji();

　　this.loadEmoji();

　　this.bindEvent();

　　},

　　bindEvent: function(){},

　　toEmoji: function(){}, //服务器数据转换成表情

　　toText: function(){} //转换成文字

　　loadEmoji: function(){}//加载表情

　　}

　　好啦，这样一个表情插件就算完工了，系不系很简单？目前暂时需要依赖jquery，之后如果有精力的话继续捣鼓一个基于原生js的O(∩_∩)O，具体的实现代码在github上。

　　最后，附上github地址：https://github.com/beidan/emoji 欢迎star，fork~~~~~~~

　　专栏作者简介 （ 点击 → 加入专栏作者 ）

　　陈被单：简介还没来得及写 :）

　　【今日微信公号推荐↓】

　　更多推荐请看 《值得关注的技术和设计公众号 》

　　其中推荐了包括 技术、 设计、 极客 和 IT相亲相关的热门公众号。技术涵盖：Python、Web前端、Java、安卓、iOS、PHP、C/C++、.NET、Linux、数据库、运维、大数据、算法、IT职场等。点击《值得关注的技术和设计公众号》，发现精彩！