js从0开始构思表情插件

最新推荐文章于 2024-06-25 08:39:58 发布

wf2017

最新推荐文章于 2024-06-25 08:39:58 发布

阅读量635

点赞数

分类专栏： javascript 文章标签：前端 js 表情插件

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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

功能

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

使用方法：

在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（）获取内容，再对内容进行处理。

转换成文字：

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

转换成图片：

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

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

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

转载：
http://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA==&mid=2651551104&idx=1&sn=d337deb5f5c9f39d0cb95f1f5ebb3b6e&scene=23&srcid=0808KD0Nt0qZDMXK4MqJhAyW#rd