emoji web端处理
1、发送给服务器端的信息，因为图片是选择的在web端只提供了50个表情选择，所以将 #哈哈# ，凡是# #包裹的内容转化成对应的unicode编码， 比如U+1F603。每一个对应起来，这一点比较麻烦。
2、服务器发过来的信息 将里面U+1f603 这种 u+开头的转化成<span class="emoji emoji1f603 "></span>，再根据emoji.js emoji.css emoji.png这三个文件 显示出图片。
3、代码链接：链接：https://pan.baidu.com/s/1nsuzW7o7_CaaHLWXgdsP2Q 密码：br1u；运行里面的test.html可看效果。
html和js代码：
<!DOCTYPE html>
<html lang="en-us"> <head>
<meta charset="UTF-8">
<title>jQuery-emoji by eshengsky</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="js/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="emoji.css" />
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/jquery.emoji.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mCustomScrollbar.min.css" />
<script src="js/jquery.mCustomScrollbar.min.js"></script>
<script src="js/jquery.mousewheel-3.0.6.min.js"></script>
<script src="js/highlight.pack.js"></script>
<script src="js/jquery.emoji.min.js"></script>
</head> <body> <span class="emoji emoji1f51d "></span>
<section class="main-content container"> <div class="row m-t-20">
<div class="col-md-6">
<textarea id="editor" contenteditable="true" value="U+2600"></textarea>
<button id="btn" class="btn btn-sm btn-default">加载图片</button>
<button class="fasong">发送</button>
</div>
</div>
<div class="getinfo" id="getinfo" style="border: 1px solid black;min-height: 200px;">
<div class="add"></div>
</div>
</section> <script>
hljs.initHighlightingOnLoad();
$("#editor").emoji({
button: "#btn",
showTab: false,
animation: 'slide',
icons: [{
path: "img/qq/",
file: ".png",
maxNum: 50,
excludeNums: [],
placeholder: "#{alias}#",
alias: {
1: "微笑",
2: "大笑",
3: "笑哭",
4: "发呆",
5: "睡觉",
6: "尴尬",
7: "抓狂",
8: "天使",
9: "眨眼",
10: "可爱",
11: "吃",
12: "闭眼",
13: "喜欢",
14: "酷",
15: "得意",
16: "闭嘴",
17: "口罩",
18: "难过",
19: "囧",
20: "吃惊",
21: "撇嘴",
22: "混乱",
23: "吹口哨",
24: "飞吻",
25: "亲",
26: "害羞",
27: "无表情",
28: "大眼睛",
29: "伸舌头",
30: "不高兴",
31: "不开心",
32: "生气",
33: "愤怒",
34: "流鼻涕",
35: "饥饿",
36: "抓狂",
37: "流汗",
38: "叹气",
39: "惊讶",
40: "生病",
41: "快哭了",
42: "哈欠",
43: "可怜",
44: "张嘴笑",
45: "哭",
46: "糗大了",
47: "卖萌",
48: "委屈",
49: "右哼哼",
50: "很开心"
}
}]
});
// 接受服务器传来的u+unicode后转码成图片
function toUnicode(s){
return s.replace(/(u\+{1}[0-9a-fA-F]{4,6})/ig,function(a){
a=a.toLowerCase().substr(2);
return "<span class='emoji emoji"+a+"'></span>";
});
}
var arremoji=[
{'zcname':'微笑','emojicode':'1F604'},
{'zcname':'大笑','emojicode':'1F601'},
{'zcname':'笑哭','emojicode':'1F602'},
{'zcname':'发呆','emojicode':'1F633'},
{'zcname':'睡觉','emojicode':'1F634'},
{'zcname':'尴尬','emojicode':'1F605'},
{'zcname':'抓狂','emojicode':'1F606'},
{'zcname':'天使','emojicode':'1F607'},
{'zcname':'眨眼','emojicode':'1F609'},
{'zcname':'可爱','emojicode':'263A'},
{'zcname':'吃','emojicode':'1F60B'},
{'zcname':'闭眼','emojicode':'1F60C'},
{'zcname':'喜欢','emojicode':'1F60D'},
{'zcname':'酷','emojicode':'1F60E'},
{'zcname':'得意','emojicode':'1F60F'},
{'zcname':'闭嘴','emojicode':'1F567'},
{'zcname':'口罩','emojicode':'1F637'},
{'zcname':'难过','emojicode':'1F612'},
{'zcname':'囧','emojicode':'1F613'},
{'zcname':'吃惊','emojicode':'1F632'},
{'zcname':'撇嘴','emojicode':'1F615'},
{'zcname':'混乱','emojicode':'1F616'},
{'zcname':'吹口哨','emojicode':'1F617'},
{'zcname':'飞吻','emojicode':'1F618'},
{'zcname':'亲','emojicode':'1F60C'},
{'zcname':'害羞','emojicode':'1F61A'},
{'zcname':'无表情','emojicode':'1F636'},
{'zcname':'大眼睛','emojicode':'1F61C'},
{'zcname':'伸舌头','emojicode':'1F61D'},
{'zcname':'不高兴','emojicode':'1F61E'},
{'zcname':'不开心','emojicode':'1F61F'},
{'zcname':'生气','emojicode':'1F620'},
{'zcname':'愤怒','emojicode':'1F621'},
{'zcname':'流鼻涕','emojicode':'1F622'},
{'zcname':'饥饿','emojicode':'1F623'},
{'zcname':'抓狂','emojicode':'1F624'},
{'zcname':'流汗','emojicode':'1F625'},
{'zcname':'叹气','emojicode':'1F626'},
{'zcname':'惊讶','emojicode':'1F627'},
{'zcname':'生病','emojicode':'1F628'},
{'zcname':'快哭了','emojicode':'1F629'},
{'zcname':'哈欠','emojicode':'1F62A'},
{'zcname':'可怜','emojicode':'1F62B'},
{'zcname':'张嘴笑','emojicode':'1F62C'},
{'zcname':'哭','emojicode':'1F62D'},
{'zcname':'糗大了','emojicode':'1F631'},
{'zcname':'卖萌','emojicode':'1F62E'},
{'zcname':'委屈','emojicode':'1F630'},
{'zcname':'右哼哼','emojicode':'1F63E'},
{'zcname':'很开心','emojicode':'1F63A'},
];
// 发送给后台的转换
function toUnicode2(s){
return s.replace(/(?:#{1}[\u4e00-\u9fa5]{1,3}#{1})/g,function(a){
a=a.replace(/#/g,'');
console.log(a);
for(var i=0;i<arremoji.length;i++){
if(a==arremoji[i].zcname){
return 'u+'+arremoji[i].emojicode;
}
}
});
}
$('.fasong').click(function() {
var val = $("#editor").val();
val=toUnicode(val);
$('#getinfo').append('<div class="add"></div>');
$('.add').last().html(val);
// 发送内容给服务器端
var rescc=toUnicode2(val);
console.log(rescc);
$(".add").emojiParse({
icons: [{
path: "img/qq/",
file: ".png",
placeholder: "#{alias}#",
alias: {
1: "微笑",
2: "大笑",
3: "笑哭",
4: "发呆",
5: "睡觉",
6: "尴尬",
7: "抓狂",
8: "天使",
9: "眨眼",
10: "可爱",
11: "吃",
12: "闭眼",
13: "喜欢",
14: "酷",
15: "得意",
16: "闭嘴",
17: "口罩",
18: "难过",
19: "囧",
20: "吃惊",
21: "撇嘴",
22: "混乱",
23: "吹口哨",
24: "飞吻",
25: "亲",
26: "害羞",
27: "无表情",
28: "大眼睛",
29: "伸舌头",
30: "不高兴",
31: "不开心",
32: "生气",
33: "愤怒",
34: "流鼻涕",
35: "饥饿",
36: "抓狂",
37: "流汗",
38: "叹气",
39: "惊讶",
40: "生病",
41: "快哭了",
42: "哈欠",
43: "可怜",
44: "张嘴笑",
45: "哭",
46: "糗大了",
47: "卖萌",
48: "委屈",
49: "右哼哼",
50: "很开心"
}
}]
}); })
</script>
</body> </html>
emoji web端处理的更多相关文章
- 关于emoji表情，支持在app端发送web端显示，web端发送给app端显示，web与wap端互相显示。
要用到emoji.js和emoji.jquery.js两个插件配合实现三端互通. 1.app端发送的emoji表情----到服务器---服务器存储的是‘问号’,无法显示如图所示: 后台的同学也试验了网 ...
- 移动web端的react.js组件化方案
背景: 随着互联网世界的兴起,web前端开发的方式越来越多,出现了很多种场景开发的前端架构体系,也对前端的要求日益增高,早已经不是靠一个JQuery.js来做前端页面的时代了,而今移动端变化最大,近 ...
- web端限时活动逻辑处理总结
由于要在web端做一个限时活动的功能,功能大致为:一个小时内可以报名参加活动,然后给予报名者奖品,先到先得.用到一些处理逻辑做下总结,以前没有做过类似的东西,都是自己先体验其他网站的报名方式,然后再摸 ...
- 小程序 web 端实时运行工具
微信小程序 web 端实时运行工具 https://chemzqm.github.io/wept/
- 力软信息化系统快速开发框架 web端+winform端
力软信息化系统快速开发框架是一套集权限管理+快速开发+动态接口+通用组件+动态UI于一体的全新.net信息化快速开发框架.力软信息化系统快速开发框架的使用,大大地缩短了开发周期,提高了软件质量,同时也 ...
- 基于SignalR的web端即时通讯 - ChatJS
先看下效果. ChatJS 是基于SignalR实现的Web端IM,界面风格模仿的是“脸书”,可以很方便的集成到已有的产品中. 项目官网:http://chatjs.net/ github地址:htt ...
- Web端即时通讯技术盘点：短轮询、Comet、Websocket、SSE
1. 前言 Web端即时通讯技术因受限于浏览器的设计限制,一直以来实现起来并不容易,主流的Web端即时通讯方案大致有4种:传统Ajax短轮询.Comet技术.WebSocket技术.SSE(Serve ...
- 新手入门：史上最全Web端即时通讯技术原理详解
前言 有关IM(InstantMessaging)聊天应用(如:微信,QQ).消息推送技术(如:现今移动端APP标配的消息推送模块)等即时通讯应用场景下,大多数都是桌面应用程序或者native应用较为 ...
- 基于吉日嘎底层架构的通用权限管理Web端UI更新：参考DTcms后台界面
经一周的研究学习,看了国内的H+.HUI等,国外的PaperDashboardPro.Make.Metronic BootStrap等,最终选定用一个轻量的,适合中国人的,来自DTcms的后台管理UI ...
随机推荐
- JS高级---函数作为参数使用
函数作为参数使用 var arr = [1, 100, 20, 200, 40, 50, 120, 10]; //排序 arr.sort(); console.log(arr); 排序---函数作为参 ...
- 【算法学习记录-排序题】【PAT A1062】Talent and Virtue
About 900 years ago, a Chinese philosopher Sima Guang wrote a history book in which he talked about ...
- 查看gcc编译器版本
我们在windows下DS5中编译时使用GCC交叉编译器,但是在ubuntu时也需要使用GCC编译器,这时最好时保持版本一致,所以就需要查看windows下版本,如下图,在按装的文件夹中找到对应得文件 ...
- Python - 安装 - 在 Alpine Linux 下安装 Python2
概述 在 Alpine Liunx 下安装 python2 感觉又是水了一发... 感觉还是有点丢人, 就像在帮小学生写作业, 写完了后还想找人夸我... 最近看 docker 和 jenkins, ...
- 【C语言】用指针作为形参完成数据的升序排列
#include<stdio.h> void sort(int *x,int n); int main() { ] = { ,,,,,,,,, },i; sort(arr, ); prin ...
- 程序设计实验：一个Python游戏，体验软件开发。
小组在GitHub上找了一个Pygame实现的超级马里奥游戏.所以我的学习过程大致如下: 1.快速学习Python基础语法. 2.学习pygame并着手理解这个项目. 3.完成作业以及各种文档报告. ...
- 微信小程序 （全局配置和页面配置）
全局配置 app.json 文件用来对微信小程序进行全局配置. 一.配置页面路径 二.window 配置全局默认的窗口 navigationBarTextStyle:导航栏的标题颜色 navigati ...
- Nginx之server和location配置使用
配置server代码段: server { server_name www.meiduo.site; listen ; root /home/python/Desktop/meiduo_mall_ad ...
- windows系统下，gpu开发环境部署
1,安装python,使用anaconda或者直接用python.exe安装都可以.我用的是python3.6版的 对于相关的程序包,比如tensorflow或者opencv等,anaconda可以在 ...
- 【网易官方】极客战记（codecombat）攻略-地牢-Kithmaze 二度历险
关卡连接: https://codecombat.163.com/play/level/the-second-kithmaze 很多人试过,但只有少数人能穿过此迷宫. 简介: 记住,你只需 一个 wh ...