JavaScript从0开始构思表情插件

前言：

由于公司开发项目需要用到表情插件，在网上百度了好久，很多表情插件，都是需要引用好多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（）获取内容，再对内容进行处理。 转换成文字：

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

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

var keys = '\\+|-||||ball|a|ab|abc|abcd|accept……' //这里只列出部分
regex = new RegExp(':(' + keys + '):', 'g'), // 匹配格式形如这样子的格式 ：：
$(obj[i]).html().replace(regex, emoji) //替换
function emoji() {
var key = arguments[];
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

以上所述是小编给大家介绍的JavaScript从0开始构思表情插件，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • JavaScript 浏览器验证代码(来自discuz)

    在看 Discuz! 的源码的时候,发现了一段浏览器验证的代码,还是比较经典的: 复制代码 代码如下: var BROWSER = {}; var USERAGENT = navigator.userAgent.toLowerCase(); alert(USERAGENT); BROWSER.ie = window.ActiveXObject && USERAGENT.indexOf('msie') != -1 && USERAGENT.substr(USERAGENT.i

  • js实现仿Discuz文本框弹出层效果

    js实现仿Discuz文本框弹出层效果

    本文实例讲述了js实现仿Discuz文本框弹出层效果.分享给大家供大家参考.具体如下: 这是一个在经典论坛曾经热讨论的问题,记得在QQ邮箱里也有类似功能,Discuz7.0论坛里同样也有,当你的鼠标单击文本框的时候,会弹出一个包含文字.图片.表单无素的DIV层,里面的元素都可以进行操作,很方便,选中的值会自动添加到文本框内.本代码经过了多次修正,没有进行过多美化,你美工好的话可以自己美化. 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//D

  • javascript控制在光标位置插入文字适合表情的插入

    直接上代码吧,用js控制在光标位置插入. 在实现表情的插入时用到了. 复制代码 代码如下: <span style="font-size:18px;"><html> <head> <script type='text/javascript'> function test(str){ var tc = document.getElementById("mytextarea"); var tclen = tc.value.

  • 海河写的 Discuz论坛帖子调用js的php代码

    调用代码 <script language="javascript" src="js_bbs.php?fid=1"></script> js_bbs.php(放在根目录下) 内容 <?php require ("bbs/config.inc.php"); //连接,选择数据库  $link = mysql_connect( $dbhost,$dbuser,$dbpw) or die('Could not connec

  • discuz中用到的javascript函数解析 原创第1/2页

    var lang = new Array(); var userAgent = navigator.userAgent.toLowerCase(); var is_opera = userAgent.indexOf('opera') != -1 && opera.version(); var is_moz = (navigator.product == 'Gecko') && userAgent.substr(userAgent.indexOf('firefox') + 8

  • discuz表情的JS提取方法分析

    discuz表情的JS提取方法分析

    本文实例讲述了discuz表情的JS提取方法.分享给大家供大家参考,具体如下: discuz将应用的表情生成了一个js文件,在forumdata/cache/下,叫smilies_var.js,这个文件是根据后台数据库 生成的一个表情数组,里面有两个数组,一个是表情名称和所在目录的数组smilies_type,一个是表情图片名和代码的数组 smilies_array,这些都是更新缓存的时候自己读数据库生成的,所以后台的改动一样会改动到它. 论坛快速回复的表情是一个弹出层,虽然已经很不错,但仍然会

  • Discuz! 5.0.0论坛程序中加入一段js代码，让会员点击下载附件前自动弹出提示窗口

    你需要修改attachment.php文件 在根目录下  在$attachexists = $ispaid = FALSE;下面添加  if (!empty($checktwo)) {  在最末尾的?>前添加  } else {  echo "<script>alert('写上你要提示的内容')</script>";  echo "<META HTTP-EQUIV=\"Refresh\" CONTENT=\"0

  • javascript Discuz代码中的msn聊天小功能

    javascript中添加以下2个函数 function msnoperate(action, msn) {    var actionArray = new Array();    actionArray = {    'add' : 'http://go.discuz.com/?app=msn&linkid=5&msn=' + msn,    'chat' : 'http://go.discuz.com/?app=msn&linkid=6&msn=' + msn    

  • java(jsp)整合discuz同步登录功能详解

    java(jsp)整合discuz同步登录功能详解

    最近做了一个资源库系统的项目,老师说可以搭建开源论坛替代自己开发社交模块,正好在开源中国上看到了一个利用discuz的UCenter功能实现同步登录的开源项目(https://code.google.com/p/discuz-ucenter-api-for-java/),不禁大喜,于是花了几个小时照着教程操作了一遍,居然很轻松的成功了,特写此文以做纪念.. Uenter是Comsenz旗下各个产品之间信息直接传递的一个桥梁,通过UCenter站长可以无缝整合Comsenz系列产品,实现用户的一站

  • JavaScript从0开始构思表情插件

    JavaScript从0开始构思表情插件

    前言: 由于公司开发项目需要用到表情插件,在网上百度了好久,很多表情插件,都是需要引用好多js文件,也没有现成的demo可以使用,还有一些插件是引用好多图片,每一个表情都要重新请求一下.为了这样一个功能,要引入好多js,img,也是得不偿失-- 所以,博主自己码了一个小巧的"表情插件",方便以后项目直接使用. 功能 功能:传递表情对应的字符格式到后台,后台返回字符串,前端将该字符串解析展示成相应的表情展示在页面上. 使用方法: 在option中配置需要的参数 var option =

  • 基于jQuery实现的QQ表情插件

    基于jQuery实现的QQ表情插件

    不废话了,先给大家展示效果图: 查看演示 下载源码 我们在QQ聊天或者发表评论.微博时,会有一个允许加入表情的功能,点击表情按钮,会弹出一系列表情小图片,选中某个表情图片即可发表的丰富的含表情的内容.今天和大家分享一款基于jQuery的QQ表情插件,您可以轻松将其应用到你的项目中. HTML 首先在html页面的head中引入jQuery库文件和QQ表情插件jquery.qqFace.js文件. <script type="text/javascript" src="j

  • 浅谈href=#与href=javascript:void(0)的区别

    #"包含了一个位置信息 默认的锚点是#top 也就是网页的上端 而javascript:void(0)  仅仅表示一个死链接 这就是为什么有的时候页面很长浏览链接明明是#可是跳动到了页首 而javascript:void(0) 则不是如此 所以调用脚本的时候最好用void(0) 或者<input onclick> <div onclick>等 打开新窗口链接的几种办法 1.window.open('url') 2.用自定义函数 <script>       

  • javascript:;与javascript:void(0)使用介绍

    最近看了好几个关于<a>标签和javascript:void(0)的帖子,谨记于此,以资查阅. 注:以下代码未经全面测试,但每一种方法可能会出现的情况都基本做了说明. 在做页面时,如果想做一个链接点击后不做任何事情,或者响应点击而完成其他事情,可以设置其属性 href = "#",但是,这样会有一个问题,就是当页面有滚动条时,点击后会返回到页面顶端,用户体验不好. 目前有如下几种解决办法: 1)点击链接后不做任何事情 <a href="javascript:

  • javascript:void(0)的问题使用探讨

    在做页面时,如果想做一个链接点击后不做任何事情,或者响应点击而完成其他事情,可以设置其属性 href = "#",但是,这样会有一个问题,就是当页面有滚动条时,点击后会返回到页面顶端,用户体验不好. 目前有如下几种解决办法: 1)点击链接后不做任何事情 复制代码 代码如下: <a href="javascript:void(0);" >test</a> <a href="javascript:;" >test&

  • js中javascript:void(0) 真正含义

    在Javascript中void是一个操作符,该操作符指定要计算一个表达式但是不返回值. 我想使用过ajax的都常见这样的代码: 复制代码 代码如下: <a href="javascript:doTest2();void(0);">here</a> 但这儿的void(0)究竟是何含义呢? void 操作符用法格式如下: 1. javascript:void (expression) 2. javascript:void expression expression

  • javascript:void(0)使用探讨

    在做页面时,如果想做一个链接点击后不做任何事情,或者响应点击而完成其他事情,可以设置其属性 href = "#",但是,这样会有一个问题,就是当页面有滚动条时,点击后会返回到页面顶端,用户体验不好. 目前有如下几种解决办法: 1)点击链接后不做任何事情 复制代码 代码如下: <a href="javascript:void(0);" >test</a> <a href="javascript:;" >test&

  • js中 javascript:void(0) 用法详解

    javascript:void(0)表示不做任何动作.如: 复制代码 代码如下: <a href="javascript:void(0);" onclick="alert('ok');"></a> 这里表示这个链接不做跳转动作,执行onClick事件. 我想使用过ajax的都常见这样的代码: 复制代码 代码如下: <a href="javascript:doTest2();void(0);">here</

  • vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)

    我发现好多倒计时的插件,刷新都会变成从头再来,于是自己用vue2.0写了一个,测试通过,直接上代码 如下是组件代码: <template> <span :endTime="endTime" :callback="callback" :endText="endText"> <slot> {{content}} </slot> </span> </template> <sc

  • javascript:void(0)是什么意思示例介绍

    Javascript中void是一个操作符,该操作符指定要计算一个表达式但是不返回值. void 操作符用法格式如下: 1. javascript:void (expression) 2. javascript:void expression expression 是一个要计算的 Javascript 标准的表达式.表达式外侧的圆括号是选的,但是写上去是一个好习惯. (实现版本 Navigator 3.0 ) 你以使用 void 操作符指定超级链接.表达式会被计算但是不会当前文档处装入任何内容.

随机推荐