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

标签: 网页聊天 聊天输入框 jQuery web websocket 表情 图片
17人阅读 评论(0) 收藏 举报
分类:

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

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


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



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



查看评论

js实现网页在线聊天功能(一)

由于一些项目的需要,近来我自己写了一个基于JS,要使用ajax接收发送数据的一个网页在线聊天工具。                                     图一 准...
  • xyw591238
  • xyw591238
  • 2016-04-05 09:41:41
  • 13884

javaweb:在线聊天网站(框架版)

之前写过一次在线聊天网站,不过那次是无框架版的,这次用框架构建网站,基本功能和上次差不多 涉及知识 java spring(4.3.5):spring、spring MVC hiber...
  • name_z
  • name_z
  • 2017-02-15 15:36:29
  • 6407

HTML,CSS,JS实现网页聊天窗口

  • wf134
  • wf134
  • 2017-12-18 22:49:46
  • 1985

web页面聊天窗口

  • 2015年05月21日 13:52
  • 235KB
  • 下载

网页实现表情

1.准备好表情图片2.把表情全部按顺序命名,例如:4.把图片表情全部放在一个文件夹,然后拷贝到项目中。5.在页面生成表情预览,用于点击输入:预览布局可自己编写,表情生成代码如下: //生成表情 ...
  • qq_39672686
  • qq_39672686
  • 2018-03-22 15:07:19
  • 189

微信小程序中使用emoji表情

【问题描述】    微信小程序开发,商户授权给用户后,用户便可关注小程序。有的用户的微信账户号中带有emoji表情,这样的话,直接存储到mysql5.5以下版本的数据库中会报异常。【问题缘由】    ...
  • u013034223
  • u013034223
  • 2017-10-25 11:24:31
  • 1758

web 页面打开QQ聊天框

function fun1(){ window.location='tencent://message/?uin=2538698032&websiteName=玮&Menu=yes' }
  • dai_jing
  • dai_jing
  • 2016-04-29 16:48:59
  • 922

<em>聊天</em>窗口实现

<em>网页</em>中点击按钮弹出QQ<em>聊天</em>窗口的功能实现 C++<em>聊天</em>窗口 立即下载 上传者: plazzy 时间: 2017-10-21 综合评分: 0 积分/C币:3 WPF<em>聊天</em>对话框 立即下载 上...
  • 2018年03月26日 00:00

C#实现QQ表情框

以下是做项目时实现的二种类似于QQ表情弹出框功能的实现方法,方法一采用DataGridView实现,方法二通过ToolStripDropDown实现。 一先贴出实现效果。 方法一 DataGr...
  • tf576776047
  • tf576776047
  • 2012-11-04 13:09:54
  • 4454

Qt 之 QQ系统表情(一)

在走上Qt之路后,对QQ的界面便情有独钟,由衷感叹:一个字——美 两个字——很美 三个字——非常美 四个字——真TM美说实在QQ的界面做的很精、致,毕竟积累了十几年的功力。但是也有不足的地方,任...
  • GoForwardToStep
  • GoForwardToStep
  • 2016-08-30 22:03:52
  • 2356
    个人资料
    等级:
    访问量: 4009
    积分: 132
    排名: 116万+