转载：/blog/144
我网站的评论库一直是使用django-comments库。该评论库对垃圾评论和html处理得都挺不错。但问题是只能写入文字，没有提供富文本编辑功能，需要自己开发。为了丰富评论功能，加入表情是一种不错的方案。
当然，你可以用ueditor等富文本编辑器。
但这些都比较复杂、厚重。评论区域我只想需要简单的效果即可，可以写文字和插入表情。
先看看我最终实现的效果，引起大家的好奇心。
1、先合并整理代码
可忽略该步骤（若想了解emoji表情功能如何实现，直接看第2点）
因为前面评论和回复开发过程中，把评论框和回复框分开两个。
若这次加入emoji表情功能，需要将评论和回复合并为1个，减少代码冗余度。
相关django-comments评论库的开发可以参考我前面的博文。
我的网站搭建(第5天) Django评论库
我的网站搭建(第6天) 评论Ajax提交
我的网站搭建(第16天) 只允许注册用户评论
我的网站搭建(第17天) 评论库添加回复功能
我的网站搭建(第18天) 评论或回复发送邮件通知
我的网站搭建(第29天) 多线程异步发送邮件
我的网站搭建(第44天) 添加头像字段
我的网站搭建(第45天) 上传头像
我的网站搭建(第46天) 在线头像
我的网站搭建(第47天) 修改评论列表的样式
对比评论框和回复框的代码，发现基本一样。
只需要控制回复相关3个字段的值即可。而且提交评论和回复的代码前面已经整理过一次。
代码相似度很高，删掉回复框的代码，修改评论框代码如下：
{%get_comment_formforblogasblog_form%}<formclass="form-horizontal"action="{%comment_form_target%}"method="post"id="comment_form">{%csrf_token%}{{blog_form.object_pk}}{{blog_form.content_type}}{{blog_form.timestamp}}{{blog_form.site}}{{blog_form.submit_date}}{{blog_form.security_hash}}<inputtype="hidden"name="next"value="{%url'detailblog'blog.id%}"/><inputid="reply_to"type="hidden"name="reply_to"value="0"/><inputid="root_id"type="hidden"name="root_id"value="0"/><inputid="reply_name"type="hidden"name="reply_name"value=""><divclass="row"><divclass="col-md-12"><textareaclass="input-xlargecomment_text"id="id_comment"name="comment"placeholder="为了防止垃圾评论，需要登录，才能评论哦~"></textarea><!--如果你在该字段中输入任何内容，你的评论就会被视为垃圾评论--><inputtype="text"style="display:none;"id="id_honeypot"name="honeypot"></div></div><divclass="row"><divclass="form-actionscomment_button"><spanid='tip_text'></span><inputclass="btnbtn-info"id="submit_btn"type="submit"name="submit"value="提交"/><bottonclass="btnbtn-default"id="reset_btn">清空</botton></div></div></form>
修改评论回复按钮的代码。通过代码控制判断是评论还是回复。
//回复按钮点击事件functionreply_click(obj){obj=$(obj);//设置回复信息$("#reply_to").val(obj.attr("role"));$("#root_id").val(obj.attr("root"));$("#reply_name").val(obj.attr("base"));//显示回复的相关内容$("#comment_title").text("回复："+obj.attr("base"));$("#reply_text_pre").html($("#comment_"+obj.attr("role")).html());//显示要回复的评论内容$("#reply_text_pre").show();$("#reply_cancel").show();//评论框获得焦点$("#id_comment").focus();returnfalse;}
当然，你还需要一个“取消回复”的按钮，取消回复变成新的评论。
该按钮位置自己随便放。该按钮点击事件代码如下：
//取消回复-按钮$("#reply_cancel").click(function(){//设置相关数据$("#reply_to").val('0');$("#root_id").val('0');$("#reply_name").val("");//调整页面显示$("#comment_title").text("新的评论");$("#reply_text_pre").hide();$("#reply_cancel").hide();});
评论框和回复框的代码合并完成。接下来讲怎么加入emoji表情功能。
2、emoji表情功能实现方式
这个参考过一些文章，查了不少emoji相关的库或前端插件。例如django-emoji、emojione等。
都只是提供一个emoji表情包和emoji字符文本转换图片表情功能。
我还需要一个东西显示emoji表情选择器，方便用户选择并插入表情。而且保存到数据库的时候还是emoji字符文本或者表情的转义文本。
在Github找到一款jQuery插件：emojioneArea
该插件是利用emojione提供的表情库，制作成一个emoji插件。
该插件有两个版本v2和v3，我比较喜欢v2版本的样式。
Github上提供的是v3。而v2需要通过npm安装：
npminstallemojionearea@^2.1.3
若觉得安装npm麻烦，可以下载我的demo版本/s/1hsr9isO
其中，demo文件夹是官方的demo，包含各种使用方法。
而demo-min文件夹是我的demo文件，只有一个较为精简的例子。
3、在项目中使用emojioneArea
首先引用如下js和css：
<scripttype="text/javascript"src="js/jquery-1.11.3.min.js"></script><!--emojionev2.1.1使用bootstrap的cdn--><linkrel="stylesheet"type="text/css"href="/emojione/2.1.1/assets/sprites/emojione.sprites.css"><scripttype="text/javascript"src="/emojione/2.1.1/lib/js/emojione.min.js"></script><!--emojionearea--><linkrel="stylesheet"type="text/css"href="css/emojionearea-2.1.3.min.css"><scripttype="text/javascript"src="js/emojionearea-2.1.3.min.js"></script>
其中，emojione表情库我使用bootstrap提供的cdn链接。
接着绑定文本框，我原本页面评论框是一个textarea标签，可以直接被emojioneArea绑定。
评论框的id为id_comment，加入如下代码即可：
//使用emojioneArea$("#id_comment").emojioneArea();
默认使用emojioneArea设置，原本的评论框被隐藏。如下效果：
由于emojioneArea的编辑框失去焦点，就自动返回文本给原本的评论框。
我现在的页面评论提交代码都是基于原本的评论框。
这么一来，我无须做其他修改，就完成了emoji表情功能。
4、评论后显示emoji表情图片
评论后不做任何处理的话，会显示emoji表情的文字字符。
需要用emojione插件的表情字符转图片，代码如下：
//对评论内容的emoji转化$(".comment_contentp,.reply_contentp").each(function(){$(this).html(emojione.toImage($(this).text()));});
该代码是找到评论的内容，遍历每一条评论。
获取其文本，通过emojione.toImage方法转换后的结果是html代码。例如：
<imgalt="
