话不多说,单刀直入正题。
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/ 点击打开链接
自己实现的网页聊天截图:
代码很早之前写的,忙,没顾得上整理,最近整理一下吧