俄罗斯贵宾会-俄罗斯贵宾会官网
做最好的网站

俄罗斯贵宾会js从0开始构思表情插件

关于作者:陈被单

俄罗斯贵宾会 1

热爱前端,欢迎交流 个人主页 · 我的文章 · 19 ·   

俄罗斯贵宾会 2

表情插件的三个原理:

打赏支持我写出更多好文章,谢谢!

任选一种支付方式

俄罗斯贵宾会 3 俄罗斯贵宾会 4

1 赞 5 收藏 评论

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

js从0开始构思表情插件

2016/07/28 · JavaScript · 插件

本文作者: 伯乐在线 - 陈被单 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者

前言:

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

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

demo 地址:http://121.42.190.17/demo/emoji/src/demo.html

功能

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

使用方法:

在option中配置需要的参数

JavaScript

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();

1
2
3
4
5
6
7
8
9
10
11
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();

俄罗斯贵宾会 5

大致效果截图:(ui方面可以根据各自需要进行美化)

俄罗斯贵宾会 6

点击发送后,发送给后台的数据是:
俄罗斯贵宾会 7

表情插件的三个原理:

  • 如何显示表情?

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有一个问题,它支持富文本,不安全,而且用户体验不好。】

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

俄罗斯贵宾会 8

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

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

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

转换成文字:

JavaScript

content.replace(/<imgb[^>]*/, imgObj[j]) //匹配所有的<img />,替换成相应的格式 imgObj.push(format + img[i].getAttribute("alt") + format); //这里的format我使用的是: 所以就是类似这样 :fearful: 的格式

1
2
content.replace(/<imgb[^>]*/, imgObj[j])         //匹配所有的<img />,替换成相应的格式
imgObj.push(format + img[i].getAttribute("alt") + format);    //这里的format我使用的是:  所以就是类似这样 :fearful:   的格式

转换成图片:

JavaScript

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格式 }

1
2
3
4
5
6
7
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格式
}

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

JavaScript

//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; }

1
2
3
4
5
6
7
8
9
//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对象,因此就提高了运行效率。

JavaScript

Emoji.prototype = { init: function () { //放一些初始化的方法 this.toEmoji(); this.loadEmoji(); this.bindEvent(); }, bindEvent: function () {}, toEmoji: function () {}, //服务器数据转换成表情 toText: function () {} //转换成文字 loadEmoji: function () {} //加载表情 }

1
2
3
4
5
6
7
8
9
10
11
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文件,也没有现成的demo可以使用,还有一些插件是引用好多图片,每一个表情都要重新请求一下。为了这样一个功能,要引入好多js,img,也是得不偿失……

1 content.replace(/]*/, imgObj[j]) //匹配所有的,替换成相应的格式

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

功能

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

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

var keys = '\+|-||||ball|a|ab|abc|abcd|accept……' //这里只列出部分regex = new RegExp:', 'g'), // 匹配格式形如这样子的格式 ::$.replace //替换function emoji() {var key = arguments[];return ''; //返回对应的img格式}

CSS Sprites,先设定好背景图标,然后定义每一个小图标的position,width,height,即可显示想要显示的表情。 期间遇到的问题:如何控制显示表情的大小? 首先想到的是background-size这个方法,但是要重新定义它的position,非常耗费“体力”,后来,柳暗花明,发现一个属性transform: scale; 控制当前元素缩放比率,哈哈,一行代码就搞定啦~想要表情大,还是小,尺寸不满意?通通一行代码搞定 •如何在输入框中显示表情图标?

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

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

在option中配置需要的参数

本文由俄罗斯贵宾会发布于Web前端,转载请注明出处:俄罗斯贵宾会js从0开始构思表情插件

您可能还会对下面的文章感兴趣: