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开始构思表情插件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

时间: 2016-07-25

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

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

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

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

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    

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

discuz表情的JS提取方法分析

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

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

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

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

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

flash调用js中的方法,让js传递变量给flash的办法及思路

html 页中的 JavaScript 函数: 复制代码 代码如下: function GetSwfUrl(){var pics1 = parseInt(Math.random()*5)+1;var pics2 = parseInt(Math.random()*5)+1;document.my_swfId.SetVariable("pic01Num", pics1);document.my_swfId.SetVariable("pic02Num", pics2);}

destoon调用discuz论坛中带图片帖子的实现方法

在destoon开发中有时候我们需要调用论坛的帖子,但是带有图片的帖子该怎么调用出来呢,本文就来实例展示一个可以调用discuz论坛带图片的帖子的方法: 标签代码如下: <!--{php $tags=tag("table=pre_forum_thread i,pre_forum_threadimage t&prefix=&condition=i.tid=t.tid&length=36&order=i.tid desc&pagesize=9&t

DISCUZ论坛的UBB编辑器(增加灵活调用,支持ASP UBB解析)打包下载

复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  <html>  <head>  <meta http-equiv="Content-Type" content="text/html; charset=gbk">  <title>Discuz编辑器</title>  <m

千万级记录的Discuz论坛导致MySQL CPU 100%的优化笔记

发现此主机运行了几个 Discuz 的论坛程序, Discuz论坛的好几个表也存在着这个问题.于是顺手一并解决,cpu占用再次降下来了. 前几天,一位朋友通过这篇文章找到了我,说他就是运行最新的 discuz 版本,MySQL 占用 CPU 100%,导致系统假死,每天都要重启好几次,花了一个多月的时间一直没有解决,希望我帮忙一下.经过检查,他的这个论坛最重要的几个表中,目前 cdb_members 表,有记录 6.2 万:cdb_threads 表,有记录 11万:cdb_posts表,有记录

Discuz!论坛install.php书写错误漏洞

书写错误,导致恶意用户构造语句可以写入webshell,进而控制整个服务器. 前几个晚上,把前台文件,只要是数据库调用中的变量都看了一遍.看看是不是有过滤不严的地方,看完后觉得,过滤不严的地方的确不少,但是都已经被单引号保护起来了.在php中,如果magic_qoute_gpc=on(默认的)编译器会自动把单引号等特殊字符转义,而这个时候我们想改变程序的执行流程是非常困难的.这样大大的增加了入侵的难度,在某种程度上,也的确保证了其安全.这也是为什么朋友提出一定要在magic_qoute_gpc为

js调用Flex中的方法并向flex中传参及flex调用js示例

首先,有了一个swf文件,test.swf,同时也有一个自动生成的html文件,test.html. 然后,在另外一个文件,test.jsp中,通过iframe,引入了test.html,即引入了swf. 现在想要在test.jsp中,向flex传参,并调用flex中的方法,我采用的方法是: 首先,在jsp中写一个调用flex的方法,如下 复制代码 代码如下: function initSWF(){ //得到swf的object var obj = window.frames["rightfra

iframe子父页面调用js函数示例

1.iframe子页面调用父页面js函数 子页面调用父页面函数只需要写上window.praent就可以了.比如调用a()函数,就写成: 复制代码 代码如下: window.parent.a(); 子页面取父页面中的标签中的值,比如该标签的id为"test",则: 复制代码 代码如下: window.parent.document.getElementById("test").value; jQuery方法为: $(window.parent.document).c

ThinkPHP里用U方法调用js文件实例

本文实例讲述了ThinkPHP里用U方法调用js文件的方法.分享给大家供大家参考.具体如下: 在TP里提供了在模板文件中直接调用函数的快捷方法.U是其中之一.手册里有它的用法: 复制代码 代码如下: {:U('User/insert' )} 先把js文件的后缀改成html(这个不会影响),然后写个JsAction,在里面进行调用: <?php class JsAction extends Action{ function nav() { $this->display('Index:js:nav

php中通过curl模拟登陆discuz论坛的实现代码

libcurl同时也支持HTTPS认证.HTTP POST.HTTP PUT. FTP 上传(这个也能通过PHP的FTP扩展完成).HTTP 基于表单的上传.代理.cookies和用户名+密码的认证. php的curl真的是相当好用,网上一搜索相关文章都是关于curl模拟登陆的,很少人提供模拟discuz发贴的源码. 复制代码 代码如下: <?php $discuz_url = 'http://127.0.0.1/discuz/';//论坛地址 $login_url = $discuz_url