gemojifyjs插件的用法，一款用于转换某些文本为表情图标的插件

参考地址：

http://www.rubydoc.info/gems/gemojifyjs/0.0.5.4

http://hassankhan.me/emojify.js/

本文主要是基于这个插件，做一个能够在网页输入框中添加表情且显示表情的功能。

1.首先安装这个gem：


(1)gem 'gemojifyjs'

(2)bundle

2.执行好后，打开这个gem插件，把gemojifyjs/verdor文件下的一些文件夹或文件添加到应用项目的assets对应位置，即images文件夹下的文件放到images下面，javascripts文件夹下的文件放到javascripts下面，同理，其他也一样。

3.在application.js中require这个文件或文件夹，如对应这种情况，只需要加上：//= require ./gemojifyjs即可。同理在application.css中加上：*= require ./gemojifyjs

4.在需要添加表情的页面中，加入一个隐藏的div，div里面把这些表情包含进去，如：

<div id="emoji" style="display:none;">

        <span class="emojify bowtie"></span>
        <span class="emojify smile"></span>
        <span class="emojify laughing"></span>
        <span class="emojify blush"></span>


</div>

在需要添加表情的某个地方加上一个按钮，当点击这个按钮时，把上面这个div显示出来，这时候就可以看到一些表情，当然现在还只能查看，不能选择某个表情到文本输入框中（一般用div，设置contentedittable属性的值为true模拟文本输入框，因为文本输入框不能添加html）。

5.为每个表情定义click事件，当它被鼠标选中并且点击时，把这个表情显示在对应的文本输入框中。

$('.emojify').click(function(){
        # block 在这里把 <span class="emojify blush"></span>插入到文本框中（其实是可编辑的div）
 })

6.如何把某些表情文本内容，转换成表情图标呢，只需要执行：window.emojify.markup(content)即可，其中content为文本内容。