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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/yifan_lion/article/details/79968367

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

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/ 点击打开链接


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



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



阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页