js从0开始构思表情插件
分类:前端技术

js从0开头考虑表情插件

2016/07/28 · JavaScript · 插件

本文小编: 伯乐在线 - 陈被单 。未经作者许可,禁绝转发!
应接加入伯乐在线 专辑小编。

前言:

是因为集团支付项目必要运用表情插件,在英特网百度了余音回旋不绝,超多表情插件,皆以索要援用好多js文件,也未有现存的demo能够利用,还会有点插件是引用多数图片,每四个表情都要重复乞求一下。为了那样一个作用,要引进好些个js,img,也是节节失利……

为此,博主本人码了二个迷你的“表情插件”,方便未来项目平昔利用。

demo 地址:

功能

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

选拔情势:

在option中结构需求的参数

JavaScript

var option = { emojiArray: ['angry'], //填写表情字符串的数组,【注:源文件image上边包车型大巴Logo,只要求写红框内的字符串,详见下图】 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();

图片 1

大致效果截图:(ui方面能够依靠各自必要实行美化)

图片 2

点击发送后,发送给后台的数码是:
图片 3

表情插件的七个原理:

  • 怎样显示表情?

CSS Coca Colas(图片整合技艺卡塔尔(قطر‎,先设定好背景Logo,然后定义每二个小Logo的position,width,height,就可以突显想要显示的神情。

期间遇到的标题:如何决定展现表情的大小?
首先想到的是background-size那个办法,可是要再一次定义它的position,非常开支“体力”,
后来,物极必反,发掘五特性质transform: scale(1.5卡塔尔(قطر‎; 调控当前因素缩放比率,哈哈,大器晚成行代码就消除啦~想要表情大,依然小,尺寸不满意?通通风度翩翩行代码解决

  • 什么样在输入框中展现表情图标?

风流洒脱开端是筛选 input 的textarea,不过,将表情img “append”到那几个输入框前边,也未曾显示出那个Logo,后来尝试了div,再“append”之后,开掘能够成功展示表情,不过div又不可能输入文字,无果……

千帆竞发主见:使用input监听,将textarea值实时加到div中,相通的,那么些也是困难不讨好~继续查究……

新兴开掘叁个异常的大众的天性。contenteditable=”true”,又中意的精选了contenteditable。

一开端是用span承载表情图标,不过用div只怕span标签放置图像,则contenteditable会默许加到结尾的div/span中……,所以会招致输入表情Logo后,再输入文字,最终的文字会在终极二个div/span中,招致未有显得文字。好呢……真是心累……

既然div/span 不得以,就应用img标签承载表情,那下终于能够健康输入了。

【contenteditable有三个主题素材,它辅助富文本,不安全,並且顾客体验倒霉。】

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

图片 4

这边是运用网络海大学神的风度翩翩段代码,去除掉富文本功用,具体参照他事他说加以考察:某大神博文

  • 哪些对图片和文字实行转移?

那儿将在选用刚劲的正则了,先用html()获取内容,再对剧情张开始拍片卖。

转变到文字:

JavaScript

content.replace(/<imgb[^>]*/, imgObj[j]卡塔尔国//相称全体的<img />,替换来相应的格式 imgObj.push(format img[i].getAttribute("alt"卡塔尔(英语:State of Qatar) 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'卡塔尔(英语:State of Qatar), // 相配格式形如那样子的格式 :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卡塔尔(英语:State of Qatar) { 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(卡塔尔(英语:State of Qatar); this.loadEmoji(卡塔尔(英语:State of Qatar); 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地址: 欢迎star,fork~~~

附:秋招要起来了,有未有大神有好干活推荐~~

打赏扶助本人写出更加多好文章,谢谢!

打赏小编

前言:

打赏扶助笔者写出更加多好随笔,多谢!

任选意气风发种支付办法

图片 5 图片 6

1 赞 5 收藏 评论

是因为商铺支付项目必要采纳表情插件,在网络百度了深入,比相当多神采插件,都是急需引用大多js文件,也并没有现有的demo能够利用,还会有局地插件是援用大多图纸,每一个神情都要重新诉求一下。为了那样一个功用,要引进大多js,img,也是劳民伤财……

有关作者:陈被单

图片 7

热爱前端,接待沟通 个人主页 · 小编的小说 · 19 ·   

图片 8

故而,博主自身码了叁个娇小的“表情插件”,方便以往项目一向动用。

功能

效率:传递表情对应的字符格式到后台,后台重回字符串,前端将该字符串解析展现成相应的神色显得在页面上。

采用办法:

在option中构造必要的参数

var option = {emojiArray: ['angry'], //填写表情字符串的数组,【注:源文件image下面的图标,只需要写红框内的字符串,详见下图】textareaId: 'emoji-editor', //输入框的idloadId: 'load', //加载表情的idemojiContainer: 'emojiContainer', //存储表情的容器对象sendId: 'send', //发送信息的按钮 idemojiTranslateCls:'emoji-comment', //需要转换成表情的容器类名,只需要添加一个类,即可自动将:kissing_heart:渲染成表情~};/*调用方法*/var text = new Emoji;

差不离效果截图:

点击发送后,发送给后台的数量是:

表情插件的四个原理:

•怎么着显示表情?

CSS Pepsi-Colas,先设定好背景Logo,然后定义每多个小Logo的position,width,height,就能够显示想要展现的神情。 时期蒙受的难题:怎么样决定呈现表情的分寸? 首先想到的是background-size这些办法,不过要再度定义它的position,非常开支“体力”,后来,柳暗花明,开掘五性情能transform: scale; 调整当前因素缩放比率,哈哈,生龙活虎行代码就化解啦~想要表情大,仍旧小,尺寸不称心?通通黄金时代行代码化解•如何在输入框中展现表情Logo?

黄金年代初步是挑选 input 的textarea,可是,将表情img “append”到那么些输入框前边,也未曾显示出这些Logo,后来尝试了div,再“append”之后,发掘能够得逞展现表情,不过div又不能够输入文字,无果……

开班主见:使用input监听,将textarea值实时加到div中,相近的,那些也是来处不易不讨好~继续深究……

新生察觉二个超大众的性质。contenteditable="true",又欢喜的筛选了contenteditable。

风华正茂开端是用span承载表情图标,不过用div只怕span标签放置图像,则contenteditable会暗中同意加到最后的div/span中……,所以会促成输入表情Logo后,再输入文字,最后的文字会在最终二个div/span中,引致未有展现文字。好啊……真是心累……

既然div/span 不能,就应用img标签承载表情,那下终于能够符合规律输入了。

【contenteditable有三个难题,它扶助富文本,不安全,何况客商体验倒霉。】

举例说:客户粘贴的时候,会自行带格式,例子如下:

那边是运用英特网海大学神的风流洒脱段代码,去除掉富文本功用,具体参谋:某大神博文

•怎么样对图纸和文字实行转移?

这时将要动用苍劲的正则了,先用html()获取内容,再对剧情开展处理。 转变来文字:

1 content.replace(/]*/, imgObj[j]卡塔尔国 //相配全体的,替换来相应的格式

2 imgObj.push(format img[i].getAttribute; //这里的format笔者利用的是: 所以便是看似这样 :fearful: 的格式 转变到图片:

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

全体插件的代码格式,也是相比异常的冷眼阅览的卷入格局

//Emoji对象可变的属性function Emoji {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.bindEvent();},bindEvent: function () {},toEmoji: function () {}, //服务器数据转换成表情toText: function () {} //转换成文字loadEmoji: function () {} //加载表情}

好啊,那样一个神采插件便是完工了,系不系超粗略?近些日子一时需求信任jquery,之后假诺有活力的话继续捣鼓四个基于原生js的OO,具体的实现代码在github上。 最终,附上github地址:

如上所述是小编给大家介绍的JavaScript从0最先思量表情插件,希望对我们享有利于,如若我们有任何疑问请给小编留言,小编会及时还原我们的。在那也特别谢谢大家对剧本之家网址的支撑!

本文由pc28.am发布于前端技术,转载请注明出处:js从0开始构思表情插件

上一篇:更快地构建,过程与原理 下一篇:没有了
猜你喜欢
热门排行
精彩图文