<commit_before>
---
layout:     post
title:      "类似QQ表情的制作"
subtitle:   "JavaScript"
date:       2017-09-08
author:     "Junhui"
header-img: "img/post-bg-2015.jpg"
tags:
    - JavaScript
---


### 类似QQ表情的制作
#### 前言
工作要求需要一款图标控件，具体要求就是选择可以选择图标，选择后的图标要上传并保存到数据库，有点像QQ更换头像或者qq那样选择表情一样，刚开始楼组胆大，自己做了一个，效果嘛。马马虎虎（惨不忍睹），老大终于看不过去了，就说，你这是可以找一个插件的，应该有的，嗯？什么意思，也就是我前几天做的东西都没用了？没办法，只好上网找，功夫不负有心人，其实还是找到一些的，做一下对比
表情插件
1.qqface ，单纯的qq表情的插件，没有扩展
2.emoji-master，支持qq表情，支持后台数据json格式（重要）[qqface网站](http://home.awesomes.cn/emoji/)
3.jquery.sinaEmotion  封装的新浪表情，丰富完美，但是貌似不支持后台数据

#### 选择插件
工作要求，图标是要后台生成的，所以选用了相对简单暴力的emoji-master，

#### 使用方法
1. 引入jquery文件，可以直接使用百度的CSDN
```
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
```
2. 引入underscore.js文件，这个是js的集合集，为项目中提高简单高效的方法
```
<script type="text/javascript" src="js/underscore-min.js"></script>
```
3. 网站提供了引入editor.js文件，该文件该文件提供了一个文本框插入文本的方法，仅用于需要自己写编辑器插入表情的情况。(但是我在项目中并未引入，并不太需要，看情况而定)
```
<script type="text/javascript" src="js/editor.js"></script>
```
4. 引入该插件的主js文件（重要）
```
<script type="text/javascript" src="js/emojis.js"></script>
```
5. 引入css文件，该文件定义了表情的基本样式，可以自己改写样式。
```
<link rel="stylesheet" type="text/css" href="css/emoji.css">
```
6. 需要指定一个html标签容器提供容纳表情
```
<div id="emoji" class="emoji-container">
    <img  src="emoji/unicode/1f604.png" class="emoji-tbtn">
</div>
```
注意：id="emoji" 是为重要的，必须指定的，默认的emoji-container的样式，里面定义一个img标签，默认的是emoji-btn的样式，也是必须指定的。
7. 初始化插件
```
$('#emoji1').emoji({
  //- 参数列表
});
```
#### 参数讲解

1. data 
data是数据源，表情的数据，是一个json数组格式（就是看重的是json数组）；
```
data:[
{"typ":"EmojiCategory-People","nm":"数据库",
"items":[
{"name":"bbs","src":"app-bbs"},
{"name":"ERP","src":"app-ERP"},
{"name":"ISM","src":"app-ISM"}
]},
{"typ":"EmojiCategory-sys","nm":"应用系统",
"items":[
{"name":"IIS","src":"CH-IIS"},
{"name":"DB","src":"CH-DB"},
{"name":"oracle","src":"CH-oracle"}
]},
....
]
```
里面的key是固定的，在项目中别修改，typ是图标分类，nm是分类名字，name是图标中文名也就是title，src是图标英文名
2. path
表情的图片的路径
3. category
要显示的表情分类，默认的完整分类为（没有顺序之分,与上面的typ一致）：
```
category: ['EmojiCategory-People','EmojiCategory-Nature','EmojiCategory-Objects','EmojiCategory-Places','EmojiCategory-Symbols']
```
4. showbar
 是否显示左侧的分类菜单，如果只有显示一个分类，可以选择不显示
5. trigger
分类切换的事件，默认为click，可以设置任意鼠标事件，mouseover也可以的

#### 事件
1. insertAfter
这是该插件的唯一的事件，表示点击每个表情图片发生的事件，如果需要把表情插入到文本框中，我们这样写的
```
$(function(){
  var em = $('#emoji').emoji({
     insertAfter: function(item){
        $('#area').insertContent('[:'+item.name+':]')
      }
   });
})
```
其中item参数是一个json对象，包括name和src 
name是该表情的字符串标识
src表示表情图片的路径

#### 数据处理
该表情包是处理前端的展示，最终我们将数据存到了数据库里面，比如一条留言，那么我们该怎么样来展示这条留言呢？有两种方式来阻止文本：
##### 1. 直接存表情图片路径
如果我们将表情图片的路径存到了数据库里面，可以直接显示，这种方法会将图片的路径写死，不推荐<commit_msg>add iconface<commit_after>---
layout:     post
title:      "类似QQ表情的制作"
subtitle:   "JavaScript"
date:       2017-09-08
author:     "Junhui"
header-img: "img/post-bg-2015.jpg"
tags:
    - JavaScript
---


### 类似QQ表情的制作
#### 前言
工作要求需要一款图标控件，具体要求就是选择可以选择图标，选择后的图标要上传并保存到数据库，有点像QQ更换头像或者qq那样选择表情一样。
刚开始楼组胆大，自己做了一个，效果嘛。马马虎虎（惨不忍睹），老大终于看不过去了，就说，你这是可以找一个插件的，应该有的，嗯？什么意思，也就是我前几天做的东西都没用了？没办法，只好上网找，功夫不负有心人，其实还是找到一些的，做一下对比
表情插件
1. qqface ，单纯的qq表情的插件，没有扩展
2. emoji-master，支持qq表情，支持后台数据json格式（重要）[qqface网站](http://home.awesomes.cn/emoji/)
3. jquery.sinaEmotion  封装的新浪表情，丰富完美，但是貌似不支持后台数据

#### 选择插件
工作要求，图标是要后台生成的，所以选用了相对简单暴力的emoji-master，

#### 使用方法
1. 引入jquery文件，可以直接使用百度的CSDN
```
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
```
2. 引入underscore.js文件，这个是js的集合集，为项目中提高简单高效的方法
```
<script type="text/javascript" src="js/underscore-min.js"></script>
```
3. 网站提供了引入editor.js文件，该文件该文件提供了一个文本框插入文本的方法，仅用于需要自己写编辑器插入表情的情况。(但是我在项目中并未引入，并不太需要，看情况而定)
```
<script type="text/javascript" src="js/editor.js"></script>
```
4. 引入该插件的主js文件（重要）
```
<script type="text/javascript" src="js/emojis.js"></script>
```
5. 引入css文件，该文件定义了表情的基本样式，可以自己改写样式。
```
<link rel="stylesheet" type="text/css" href="css/emoji.css">
```
6. 需要指定一个html标签容器提供容纳表情

```
    <div id="emoji" class="emoji-container">
        <img  src="emoji/unicode/1f604.png" class="emoji-tbtn">
    </div>
```
注意：id="emoji" 是为重要的，必须指定的，默认的emoji-container的样式，里面定义一个img标签，默认的是emoji-btn的样式，也是必须指定的。

7. 初始化插件

```
    $('#emoji1').emoji({
      //- 参数列表
    });

```
#### 参数讲解

1. data 
data是数据源，表情的数据，是一个json数组格式（就是看重的是json数组）；
```
data:[
{"typ":"EmojiCategory-People","nm":"数据库",
"items":[
{"name":"bbs","src":"app-bbs"},
{"name":"ERP","src":"app-ERP"},
{"name":"ISM","src":"app-ISM"}
]},
{"typ":"EmojiCategory-sys","nm":"应用系统",
"items":[
{"name":"IIS","src":"CH-IIS"},
{"name":"DB","src":"CH-DB"},
{"name":"oracle","src":"CH-oracle"}
]},
....
]
```
里面的key是固定的，在项目中别修改，typ是图标分类，nm是分类名字，name是图标中文名也就是title，src是图标英文名
2. path
表情的图片的路径
3. category
要显示的表情分类，默认的完整分类为（没有顺序之分,与上面的typ一致）：

```
category: [
'EmojiCategory-People',
'EmojiCategory-Nature',
'EmojiCategory-Objects',
'EmojiCategory-Places',
'EmojiCategory-Symbols'
]

```
4. showbar
 是否显示左侧的分类菜单，如果只有显示一个分类，可以选择不显示
5. trigger
分类切换的事件，默认为click，可以设置任意鼠标事件，mouseover也可以的

#### 事件
1. insertAfter
这是该插件的唯一的事件，表示点击每个表情图片发生的事件，如果需要把表情插入到文本框中，我们这样写的
```
$(function(){
  var em = $('#emoji').emoji({
     insertAfter: function(item){
        $('#area').insertContent('[:'+item.name+':]')
      }
   });
})
```
其中item参数是一个json对象，包括name和src 
name是该表情的字符串标识
src表示表情图片的路径

#### 数据处理
该表情包是处理前端的展示，最终我们将数据存到了数据库里面，比如一条留言，那么我们该怎么样来展示这条留言呢？有两种方式来阻止文本：
##### 1. 直接存表情图片路径
如果我们将表情图片的路径存到了数据库里面，可以直接显示，这种方法会将图片的路径写死，不推荐
{'fraction_non_alphanumeric': 0.21115241635687731, 'fraction_numerical': 0.0137546468401487, 'mean_word_length': 6.78726483357453, 'pattern_counts': {'":': 36, '<': 27, '<?xml version=': 0, '>': 27, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2001776', 'n_tokens_mistral': 3347, 'n_tokens_neox': 3554, 'n_words': 240}