网页聊天框发送表情图片实现方法

话不多说，单刀直入正题。

NO 1：标签定义方法

这种方法和平常使用的输入框没什么区别，一个textarea解决问题，原理是输入特定格式的文字符号，显示的时候通过定义的规则解析，显示表情，至于图片则是以文件上传形式实现。

例子：新浪微博，贤心大神的layim

新浪微博：

layim:

优点：简单，方便，都是web开发常用的组件和方法，兼容性强

缺点：做不到所见即所得，输入表情只能看到表情中文符号，看不到表情图片

NO 2：富文本编辑器

富文本编辑器对于web coder来说是经常用到的一种组件，常见的第三方富文本编辑器有ueditor，kingeditor。。。，在实现网页聊天时，功能齐全，图片文字，表格，字体格式排版，应有尽有，但是！使用起来一个字：麻烦，在使用的时候必须去做一系列的准备工作，而且需要js代码功力深厚，自定义功能繁杂，并且富文本编辑器在功能强大的同时，也意味着n多倍的文件大小，加载时间，对于现在这样一个增加1s失去几百万客户的时代，为了实现网页聊天使用第三方富文本编辑器是非常不值当的，毕竟它的设计目的就不是为了来实现网页聊天框，而是应对网页后台复杂的文字编辑。ps：如果自己去实现一个精简版本的适用于网页聊天输入框的，还是可行的，哈哈~（我觉得头大。。）

例子：没找到。。。自己以前写的项目，对ueditor做了一些精简，还有自定义设置（实在举不出例子了，将就将就）

优点：功能强大，随便整，兼容性强，第三方强大支持

缺点：使用麻烦，毕竟不是亲生的，可能出现一些bug和NG（我是这样的，看到这句的大佬可以交流交流）

NO 3：H5 contenteditable 属性使用

翻了很多的博客，大企业的应用，审查元素查看源码，终于在那些年的回忆录--qq空间里发现了该君，自己简单实现了一个demo，卧槽，好用，简单，好！！

demo如下图，丑，将就着看吧，麻雀虽小，五脏俱全，真的是灰常简单，属性在手，聊天框有，顺便代码附上，看了就明白怎么用：

例子：那些年的回忆录--QQ空间

优点：简单，不能再简单了，一个属性解锁所有技能，当然要实现像富文本编辑器辣么强大的功能还是杯水车薪，但是应对一个网页聊天就差不多足够了，方便，管你表情图片，表格，什么都可以实现。

缺点：兼容！H5的通病，不过在这个H5满天飞，小程序后边追的时代，你还在意这个？？？哈哈哈哈哈哈哈哈

知道的方法就这三种了。。

最后聊聊网页聊天实现，看了贤心大神的layim，设计漂亮，功能齐全，那叫一个心驰神往，但是，凡事都有个但是，需要授权，在我这样不服自己写一个的人，还是自己实现吧（其实是穷，有资源的同胞看到了的话分享我一个呗），需要layim的同胞请戳：http://layim.layui.com/ 点击打开链接

自己实现的思路：websocket+workerman 

了解workman请戳：http://www.workerman.net/ 点击打开链接

自己实现的网页聊天截图：

代码很早之前写的，忙，没顾得上整理，最近整理一下吧