html5仿微信/微博網(wǎng)頁端|h5網(wǎng)頁聊天室
上次有給大家分享h5手機(jī)端聊天室，最近又在原先基礎(chǔ)上開發(fā)了一個仿微信、微博網(wǎng)頁web版聊天系統(tǒng)，使用到了HTML5+css3+jQuery+wcpop等技術(shù)開發(fā)，彈窗插件wcPop.js進(jìn)行了一次全面api升級，修復(fù)編輯器插入表情時光標(biāo)定位錯誤bug，新增了上傳附件及自定義推送內(nèi)容，另外也新增了個人名片、上傳附件、分享等樣式。
頁面主要使用css3的flex布局實現(xiàn)，側(cè)邊是消息、通訊錄、朋友圈、設(shè)置模塊，中間和右邊則是相應(yīng)模塊的展示內(nèi)容，布局效果和微信客戶端差不多
<!-- //消息模板 -->
<div class="wc__chatMsg-panel flex1">
? ? <div class="wc__slimscroll2">
? ? ? ? <div class="chatMsg-cnt">
? ? ? ? ? ? <ul class="clearfix" id="J__chatMsgList">
? ? ? ? ? ? ? ? <li class="time"><span>2017年12月28日 晚上23:15</span></li>
? ? ? ? ? ? ? ? <li class="notice"><span>當(dāng)前群聊人數(shù)較多，已顯示群成員昵稱，同時為了信息安全，請注意聊天隱私</span></li>
? ? ? ? ? ? ? ? <li class="time"><span>2017年12月31日 晚上22:30</span></li>
? ? ? ? ? ? ? ? <!-- 別人-->
? ? ? ? ? ? ? ? <li class="others">
? ? ? ? ? ? ? ? ? ? <a class="avatar" href="好友主頁(詳細(xì)資料).html"><img src="img/uimg/u__chat-img01.jpg" /></a>
? ? ? ? ? ? ? ? ? ? <div class="content">
? ? ? ? ? ? ? ? ? ? ? ? <p class="author">馬云(老子天下第一)</p>
? ? ? ? ? ? ? ? ? ? ? ? <div class="msg">
? ? ? ? ? ? ? ? ? ? ? ? ? ? hello 各位女士、先生，歡迎大家來到達(dá)摩派，進(jìn)群后記得修改備注哈~~ 名字+公司/職業(yè)/機(jī)構(gòu) <img class="face" src="img/emotion/face01/29.png"><img class="face" src="img/emotion/face01/71.png"><img class="face" src="img/emotion/face01/75.png">
? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? </li>
? ? ? ? ? ? ? ? <!--自己-->
? ? ? ? ? ? ? ? <li class="me">
? ? ? ? ? ? ? ? ? ? <div class="content">
? ? ? ? ? ? ? ? ? ? ? ? <p class="author">Nice奶思</p>
? ? ? ? ? ? ? ? ? ? ? ? <div class="msg">
? ? ? ? ? ? ? ? ? ? ? ? ? ? 么么噠，馬總發(fā)個紅包唄！
? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? <a class="avatar" href="好友主頁(詳細(xì)資料).html"><img src="img/uimg/u__chat-img14.jpg" /></a>
? ? ? ? ? ? ? ? </li>
? ? ? ? ? ? </ul>
? ? ? ? </div>
? ? </div>
</div>
// ...表情、選擇區(qū)切換
$(".wc__editor-panel").on("click", ".btn", function(){
? ? var that = $(this);
? ? $(".wc__choose-panel").show();
? ? if (that.hasClass("btn-emotion")) {
? ? ? ? $(".wc__choose-panel .wrap-emotion").show();
? ? ? ? $(".wc__choose-panel .wrap-choose").hide();
? ? ? ? // 初始化swiper表情
? ? ? ? !emotionSwiper && $("#J__emotionFootTab ul li.cur").trigger("click");
? ? } else if (that.hasClass("btn-choose")) {
? ? ? ? $(".wc__choose-panel .wrap-emotion").hide();
? ? ? ? $(".wc__choose-panel .wrap-choose").show();
? ? }
? ? wchat_ToBottom();
});
對于編輯器里面的一些內(nèi)容則需要進(jìn)行標(biāo)簽處理，去掉一些無用標(biāo)簽包裹
如下代碼片段就把內(nèi)容處理成<p></p>來包裹
function surrounds(){
? ? setTimeout(function () { //chrome
? ? ? ? var sel = window.getSelection();
? ? ? ? var anchorNode = sel.anchorNode;
? ? ? ? if (!anchorNode) return;
? ? ? ? if (sel.anchorNode === _editor ||
? ? ? ? ? ? (sel.anchorNode.nodeType === 3 && sel.anchorNode.parentNode === _editor)) {
? ? ? ? ? ? var range = sel.getRangeAt(0);
? ? ? ? ? ? var p = document.createElement("p");
? ? ? ? ? ? range.surroundContents(p);
? ? ? ? ? ? range.selectNodeContents(p);
? ? ? ? ? ? range.insertNode(document.createElement("br")); //chrome
? ? ? ? ? ? sel.collapse(p, 0);
? ? ? ? ? ? (function clearBr() {
? ? ? ? ? ? ? ? var elems = [].slice.call(_editor.children);
? ? ? ? ? ? ? ? for (var i = 0, len = elems.length; i < len; i++) {
? ? ? ? ? ? ? ? ? ? var el = elems[i];
? ? ? ? ? ? ? ? ? ? if (el.tagName.toLowerCase() == "br") {
? ? ? ? ? ? ? ? ? ? ? ? _editor.removeChild(el);
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? elems.length = 0;
? ? ? ? ? ? })();
? ? ? ? }
? ? }, 10);
}
在光標(biāo)處插入內(nèi)容則使用到 selection，js光標(biāo)對象selection的使用
document.selection : IE
window.getSelection() ：Chrome、Safari、FireFox
// 光標(biāo)處插入表情及刪除操作
$("#J__swiperEmotion").on("click", ".face-list span img", function(){
? ? var that = $(this), range;
? ? if(that.hasClass("face")){ //小表情
? ? ? ? var img = that[0].cloneNode(true);
? ? ? ? _editor.focus();
? ? ? ? _editor.blur(); //輸入表情時禁止輸入法
? ? ? ? setTimeout(function(){
? ? ? ? ? ? if(document.selection && document.selection.createRange){
? ? ? ? ? ? ? ? document.selection.createRange().pasteHTML(img);
? ? ? ? ? ? }else if(window.getSelection && window.getSelection().getRangeAt){
? ? ? ? ? ? ? ? range = window.getSelection().getRangeAt(0);
? ? ? ? ? ? ? ? range.insertNode(img);
? ? ? ? ? ? ? ? range.collapse(false);
? ? ? ? ? ? ? ? var sel = window.getSelection();
? ? ? ? ? ? ? ? sel.removeAllRanges();
? ? ? ? ? ? ? ? sel.addRange(range);
? ? ? ? ? ? }
? ? ? ? }, 10);
? ? }else if(that.hasClass("del")){ //刪除
? ? ? ? _editor.focus();
? ? ? ? _editor.blur(); //輸入表情時禁止輸入法
? ? ? ? setTimeout(function(){
? ? ? ? ? ? range = window.getSelection().getRangeAt(0);
? ? ? ? ? ? range.collapse(false);
? ? ? ? ? ? var sel = window.getSelection();
? ? ? ? ? ? sel.removeAllRanges();
? ? ? ? ? ? sel.addRange(range);
? ? ? ? ? ? document.execCommand("delete");
? ? ? ? }, 10);
? ? }
});
