新浪微博表情jQuery插件 v1.3——方便地实现表情插入功能

蓝飞 蓝飞 | 时间:2012-08-22, Wed | 57,253 views
前端开发 

重要说明:已更新,请通过 GitHub 获取最新版本。

开发缘由

自从新浪微博开放平台推出以来,各种微博应用层出不穷,作为新浪微博的忠实用户之一,我也曾开发过几个微博应用,对于微博发布应用来说,有一个功能是必不可少的,那就是表情。表情功能的实现虽说不难,但却比较繁琐,首先要了解新浪微博开放平台的表情API,然后通过某种方式调用,如果通过网页后台代码直接读取储存到JavaScript变量中,又会拖慢网页加载速度,如果采用AJAX读取,又要解决跨域问题,即便成功读取到表情数据了,又必须考虑表情分类,翻页等等等等问题,还需要考虑表情的插入方式并非简单的在文本最后插入,而是在光标所在处插入,还应该能够替换掉已选中文字,还要涉及到不同浏览器的兼容问题……

好吧,上面这段文字你可以跳过不看,你只需要知道表情功能的实现非常繁琐就行了(+_+),为了方便以后微博应用的开发,同样方便其他应用开发者,此款表情插件就此诞生。

插件简介

其实插件简介不必多说,用过新浪微博的应该都懂。自认为制作得还是比较像的:
新浪微博表情插件
Demo就不给了,上图是我们学校树洞应用的截图,算是校内性质,不提倡校外人士使用,下载文件中附带Demo,虽然比较简陋一些。

有何更新

  • 1.3 修正IE下负margin失效导致表情换行的小BUG(由@蜗牛都知道 发现)
  • 1.2 修正同一页面中对不同文本框使用该插件时插入位置错误的BUG(感谢@Belin_love 提出)

使用方法

首先不要忘记在head中加载CSS文件:

<style type="text/css" href="jquery.sinaEmotion-1.0.css"></style>

确保你的网页中引入了jQuery库:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>

然后引入js文件:

<script type="text/javascript" src="jquery.sinaEmotion-1.0.min.js"></script>

调用格式如下:

$('#face').sinaEmotion({	//表情按钮
	target: $('.emotion'),	//目标文本框,可以是input或者是textarea
	app_id: ''	//你的App Key
});

如果你的表情是在textarea的同一个表单下,也可以直接这样调用:

$('#face').sinaEmotion();

App Key的可从新浪微博开放平台获得。

下载地址

谷歌开源项目地址:http://code.google.com/p/jquery-sina-emotion/

新浪微盘下载地址:http://vdisk.weibo.com/s/A-jnVI1q0vRA

如需转载请注明出处:蓝飞技术部落格

30 条评论 »

  1. 用的第三方评论毫无压力。

    1. 这可不是用来做评论用的,是用来开发微博应用用的^_^~
      不过你想用来做评论也可以= =。。

  2. 七月初七 七月初七

    ..请问 得到都是注入 [高兴] 这种符号,然后怎么存储。。然后在发布以后 如何解析出表情来,菜鸟求教- -

    1. 储存还是直接把文本[高兴]储存就行了,如果是发布到新浪微博的话会自动转换成表情图片,如果是自己要转换的话就利用正则表达式替换成真实的图片地址就行了,不过如果你要用新浪的表情图片的话,图片地址还是需要通过新浪微博的API来获取。

    2. 他说的应该是我这货

  3. 上面的调用格式示例,target: $('.emotion')后面少了一个逗号。会导致语法错误。
    另外,你的jquery.sinaEmotion-1.1.css文件里,#emotion .container属性里我添加了一行:width:395;
    不知道为什么,如果不添加,则弹出来的表情会长度越界。也可能是我页面的其他css干扰吧

    1. 再补上一句,这个玩意真的节省了我好多时间。弹出表情什么的如果要自己写是在太麻烦了

    2. OK,已改正,灰常感谢~

  4. 寒风 寒风

    不错,不用自己写繁琐的表情库了,看来我得写解析表情的代码啊

  5. zz zz

    我现在需要一个离线的插件,有木有办法简单的改改?我已经把表情资源都下载下来了。。

    1. 可以看看这个:
      http://t.cn/zluWLKL

  6. 後生仔 後生仔

    现在提供下载的插件是最新更正过的吗?

    1. 因为最近比较忙,所以没怎么更新,不过既然你需要,就把小BUG修复了一下,现已更新致1.3版本。

  7. jeff jeff

    用新浪的表情图片的话,图片地址怎么获取与替换

    1. 请见:
      http://t.cn/zlnRtAA

  8. 一定要App key么

    1. 咋IE7没反应滴?

      1. 找到了,原来飘到浏览器左上角了,在IE7里面,表情按钮$('#face') 的父标签需要加position:relative;IE6没测,不知道

  9. 不错,我打算借来用到的应用中去哈。

    1. 用的开心,哈哈。

  10. 夜尽天明 夜尽天明

    今天刚好用到。擦。在百度找到你的。。--- yuheng

    1. @夜尽天明
      你现在擅长的是哪方面?
      金山最近在招人。。3G好像最近也在招前端。

  11. 你好,表情是可以成功插入了,但是如何将输入中还有表情的特殊字符提取出来呢?难道要循环遍历么,感觉效率有点低。

    1. 看到和自己情况类似的文章了,呵呵。http://www.52its.net/articles/92.html

      1. @竹墨轩
        我的一朋友写的= =。。

        1. 虽然使用Jquery.emotions暂时解决了文本与表情符号的转换,但瓶颈问题来了。如果表情很多很多,足足几千条以上,内部使用Array数组保持表情图片与文本的映射关系,感觉这方案也不太好。有没有更好的解决方案呢?

          1. 暂时没有想到,其实我在想表情的解析也可以在服务端解决。
            比如存入数据库的时候直接转存为HTML标签,这样就不必每次读取都重新解析了。

  12. 找资料谷歌搜索过来的,谢谢分享

  13. [...]jQuery Sina Emotion v1.0 诞生[...]

  14. [...]jQuery Sina Emotion v1.0 诞生[...]