1. 程式人生 > >網頁聊天框傳送表情圖片實現方法

網頁聊天框傳送表情圖片實現方法

話不多說,單刀直入正題。

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/ 點選開啟連結


自己實現的網頁聊天截圖:



程式碼很早之前寫的,忙,沒顧得上整理,最近整理一下吧