前言:

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

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

功能

功能:传递表情对应的字符格式到后台,后台返回字符串,前端将该字符串解析展示成相应的表情展示在页面上。
 
 
 
使用方法:
在option中配置需要的参数
 var option = {
emojiArray: ['angry'], //填写表情字符串的数组,【注:源文件image下面的图标,只需要写红框内的字符串,详见下图】
textareaId: 'emoji-editor', //输入框的id
loadId: 'load', //加载表情的id
emojiContainer: 'emojiContainer',  //存储表情的容器对象
sendId: 'send',    //发送信息的按钮 id
emojiTranslateCls:'emoji-comment', //需要转换成表情(img)的容器类名,只需要添加一个类,即可自动将:kissing_heart:渲染成表情~
};
/*调用方法*/
var text = new Emoji(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: 的格式

转换成图片:
 var keys = '\\+1|-1|100|109|1234|8ball|a|ab|abc|abcd|accept……'      //这里只列出部分
regex = new RegExp(':(' + keys + '):', 'g'), // 匹配格式形如这样子的格式 :100:
$(obj[i]).html().replace(regex, emoji) //替换
function emoji() {
var key = arguments[1];
return '<img src="" alt="' + key + '"class="emoji emoji_' + key + '"/>'; //返回对应的img格式
}


整个插件的代码格式,也是比较常见的封装方式
 //Emoji对象可变的属性
function Emoji(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~~~~~~~  

 
 
 
 



js从0开始构思表情插件的更多相关文章

  1. 经典qq表情插件(html+nodejs应用)

    由于目前在接触聊天室项目,接到一个需求实现一个类似QQ表情.在网上找了一款jquery经典表情插件.下面介绍一个用法: HTML: 首先在html页面的head中引入jQuery库文件和QQ表情插件j ...

  2. 用javascript写一个emoji表情插件

    概述 以我们写的这个emoji插件为例,网上已经有一些相关的插件了,但你总感觉有些部分的需求不能被满足(如:可以自行添加新的表情包而不用去改源代码等等) 详细 代码下载:http://www.demo ...

  3. 一款基于jQuery的QQ表情插件

    我们在QQ聊天或者发表评论.微博时,会有一个允许加入表情的功能,点击表情按钮,会弹出一系列表情小图片,选中某个表情图片即可发表的丰富的含表情的内容.今天和大家分享一款基于jQuery的QQ表情插件,您 ...

  4. 前端vue-TinyMCE富文本编辑器表情插件报错解决

    最近项目中需要使用文本编辑器,比较了下最终选择了TinyMCE这款富文本编辑器.我安装的是TinyMCE v5但是在使用表情插件的时候,表情一直都出不来,报错信息如下: Uncaught Syntax ...

  5. 【JS】heatmap.js v1.0 到 v2.0,详细总结一下:)

    前段时间,项目要开发热力图插件,研究了heatmap.js,打算好好总结一下. 本文主要有以下几部分内容: 部分源码理解 如何迁移到v2.0 v2.0官方文档译文 关于heatmap.js介绍,请看这 ...

  6. js 控制Div循环显示 非插件版

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. Heatmap.js v2.0 – 最强大的 Web 动态热图

    Heatmap 是用来呈现一定区域内的统计度量,最常见的网站访问热力图就是以特殊高亮的形式显示访客热衷的页面区域和访客所在的地理区域的图示.Heatmap.js 这个 JavaScript 库可以实现 ...

  8. ImageLightbox.js – 响应式的图片 Lightbox 插件

    ImageLightbox.js 是一款很简洁的用于显示图片灯箱效果(Lightbox)的插件,没有字幕,导航按钮或默认背景.如果默认功能不够用的话,你可以很容易地自定义 JavaScript 函数扩 ...

  9. Vue.js 2.0 和 React、Augular

    Vue.js 2.0 和 React.Augular 引言 这个页面无疑是最难编写的,但也是非常重要的.或许你遇到了一些问题并且先前用其他的框架解决了.来这里的目的是看看Vue是否有更好的解决方案.那 ...

随机推荐

  1. <a href>传参的中文乱码问题

    版权声明:本文为博主半原创文章,未经博主允许不得不转载时允许转载 :) 当需要href进行传参,参数为中文时,会出现乱码问题,最简单的方法是: 传入的值首先用escape()进行转码,然后在取值页面用 ...

  2. MongoDB 介绍

    MongoDB 是一个跨平台的,面向文档的数据库,提供高性能,高可用性和可扩展性方便. MongoDB工作在收集和文件的概念. 数据库 数据库是一个物理容器集合.每个数据库都有自己的一套文件系统上的文 ...

  3. linux命令 wget

    Linux系统中的wget是一个下载文件的工具,它用在命令行下.对于Linux用户是必不可少的工具,我们经常要下载一些软件或从远程服务器恢复备份到本地服务器.wget支持HTTP,HTTPS和FTP协 ...

  4. SVN安装使用小结

    SVN在实际的项目开发中有很广泛的用途.一开始接触SVN(Subversion),思路并不清楚,现在总算理清了. 声明:本文并不是系统地对SVN做介绍,而是笔者的使用总结,个人认为的一些要点,可能对初 ...

  5. R语言数据的输入

    键盘输入 调用edit函数,比如我们要让用户输入一个长度为5的向量并赋值给变量a,那么可以: a<-vector() a<-edit(a) 另外也可以用函数fix来直接编辑变量,而不需要再 ...

  6. java多线程学习

    在java中要想实现多线程,有两种手段,一种是继续Thread类,另外一种是实现Runable接口. 一.扩展java.lang.Thread类 package com.multithread.lea ...

  7. H264解码学习-2015.04.16

    今天看了不少,却感觉收获寥寥. 1.H264相关知识 因为RTP协议发过来的数据已经经过了H264编码,所以这边需要解码.补充一下H264的相关知识. 与以往的视频压缩标准相比,H.264 视频压缩标 ...

  8. Hadoop+MongoDB的四种方案

    背景: 公司核心业务库现存在MongoDB中,分布在6台MongoDB节点.现面临如下问题: 1.最大的一张表有10多个G,MongoDB在查询方面尚能胜任,但是涉及到复杂计算时会比较吃力. 2.Mo ...

  9. MFC MDI 获取当前视图

    ==================================声明================================== 本文原创,转载在正文中显要的注明作者和出处,并保证文章的完 ...

  10. android:context,getApplicationContext()生命周期

    getApplicationContext() 返回应用的上下文,生命周期是整个应用,应用摧毁它才摧毁Activity.this的context 返回当前activity的上下文,属于activity ...