完整demo下载
效果展示
注意
在将编辑好的含有表情的字符串存入数据库之后，可能由于编码格式及转义等原因，导致取回的字符串有所改变，存入数据和取出数据的时候需要需要做一些字符串的处理。
以下是我在项目中遇到问题的解决方案（你可能和我遇到的问题不同，仅作参考） 存入
var str = str.replace(
/"/g,
"147852");
var str = str.replace(
/\//g,
"147833");
取出
buff.detail = buff.detail.replace(
/147852/g,
'"');
buff.detail = buff.detail.replace(
/</g,
'<');
buff.detail = buff.detail.replace(
/147833/g,
"/");
buff.detail = buff.detail.replace(
/＝/g,
"=");
以下是这个demo的主要代码
完整demo下载
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/A-emoji.css"/>
<style type="text/css">
.box{
position: absolute;
bottom: 0;
width: 100%;
left: 0;
}
#display{
height: 500px;
overflow: auto;
}
</style>
</head>
<body>
<div id="display">
<div class="commentBox">
<div class="li">
<div class="icon">
<img src="img/AcFun/1.png"/>
</div>
<div class="content">
<div class="name">
adrian
</div>
<div class="time">
一小时前
</div>
<div class="text">
UISDGUIGV我就偶尔开发票【qweko-fqwekoifhwejhfiwejfo就我破防奇偶未交卡佛尔
</div>
</div>
</div>
<div class="li">
<div class="icon">
<img src="img/AcFun/1.png"/>
</div>
<div class="content">
<div class="name">
adrian
</div>
<div class="time">
一小时前
</div>
<div class="text">
UISDGUIGV我就偶尔开发票【qweko-fqwekoifhwejhfiwejfo就我破防奇偶未交卡佛尔
</div>
</div>
</div>
</div>
</div>
<div class="box">
</div>
<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script src="js/A-emoji.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var e = A_Emoji($('.box'));
for(var i=0;i<10;i++){
addRow();
}
</script>
</body>
</html>
js
function A_Emoji($box,fn){
var _box = $box;
var html =
'';
html +=
'<div class="InputBox">';
html +=
'<div class="input">';
html +=
'<div contenteditable="true" class="text"></div>';
html +=
'<div class="btnGroup">';
html +=
'<div data="emoji" class="btn" style="left:0"><img src="img/biaoqing.png"/></div>'
html +=
'<div data="confirm" class="btn" style="right:8px"><img src="img/huiche.png"/></div>'
html +=
'</div>';
html +=
'</div>';
html +=
'<div class="emojiBox">';
html +=
'<section class="emoji_container">';
html +=
'</section>';
html +=
'</div>';
html +=
'</div>';
_box.append($(html));
var defaults = {
emojiconfig: {
tieba: {
name:
"贴吧表情",
path:
"img/tieba/",
maxNum:
50,
file:
".jpg",
placeholder:
":{alias}:",
alias: {
1:
"hehe",
2:
"haha",
3:
"tushe",
4:
"a",
5:
"ku",
6:
"lu",
7:
"kaixin",
8:
"han",
9:
"lei",
10:
"heixian",
11:
"bishi",
12:
"bugaoxing",
13:
"zhenbang",
14:
"qian",
15:
"yiwen",
16:
"yinxian",
17:
"tu",
18:
"yi",
19:
"weiqu",
20:
"huaxin",
21:
"hu",
22:
"xiaonian",
23:
"neng",
24:
"taikaixin",
25:
"huaji",
26:
"mianqiang",
27:
"kuanghan",
28:
"guai",
29:
"shuijiao",
30:
"jinku",
31:
"shengqi",
32:
"jinya",
33:
"pen",
34:
"aixin",
35:
"xinsui",
36:
"meigui",
37:
"liwu",
38:
"caihong",
39:
"xxyl",
40:
"taiyang",
41:
"qianbi",
42:
"dnegpao",
43:
"chabei",
44:
"dangao",
45:
"yinyue",
46:
"haha2",
47:
"shenli",
48:
"damuzhi",
49:
"ruo",
50:
"OK"
},
title: {
1:
"呵呵",
2:
"哈哈",
3:
"吐舌",
4:
"啊",
5:
"酷",
6:
"怒",
7:
"开心",
8:
"汗",
9:
"泪",
10:
"黑线",
11:
"鄙视",
12:
"不高兴",
13:
"真棒",
14:
"钱",
15:
"疑问",
16:
"阴脸",
17:
"吐",
18:
"咦",
19:
"委屈",
20:
"花心",
21:
"呼~",
22:
"笑脸",
23:
"冷",
24:
"太开心",
25:
"滑稽",
26:
"勉强",
27:
"狂汗",
28:
"乖",
29:
"睡觉",
30:
"惊哭",
31:
"生气",
32:
"惊讶",
33:
"喷",
34:
"爱心",
35:
"心碎",
36:
"玫瑰",
37:
"礼物",
38:
"彩虹",
39:
"星星月亮",
40:
"太阳",
41:
"钱币",
42:
"灯泡",
43:
"茶杯",
44:
"蛋糕",
45:
"音乐",
46:
"haha",
47:
"胜利",
48:
"大拇指",
49:
"弱",
50:
"OK"
}
}
},
};
var _emojiBox = _box.find(
'.emojiBox');
var emojiconfig = defaults.emojiconfig;
var InputText = _box.find(
'.text');
var emojiBox = _box.find(
'.emojiBox');
var imgBtn = _box.find(
'[data="emoji"]');
imgBtn.click(
function() {
var emojiContainer = _emojiBox.find(
'.emoji_container');
if (emojiContainer.children().length <=
0) {
_emojiBox.css({
display:
'block'
});
for (
var emojilist
in emojiconfig) {
emojiContainer.append(
'<section class="for_' + emojilist +
'"></section>');
for (
var i =
1; i <= emojiconfig[emojilist].maxNum; i++) {
if (emojiContainer.find(
'.for_' + emojilist) !==
undefined) {
emojiContainer.find(
'.for_' + emojilist).append(
'<a href="#!" class="_img"><img src="' + emojiconfig[emojilist].path + i + emojiconfig[emojilist].file +
'" alt="" data-alias="'+(emojiconfig[emojilist].alias ==
undefined ? (i+emojiconfig[emojilist].file) : emojiconfig[emojilist].alias[i])+
'" title="' + (emojiconfig[emojilist].title ==
undefined ?
'' : emojiconfig[emojilist].title[i]) +
'" /></a>');
}
}
}
_emojiBox.find(
'.emoji_container section')[
0].style.display =
'block';
_emojiBox.find(
'.emoji_container ._img').on(
'click',
function() {
if (InputText[
0].nodeName ===
'DIV') {
InputText.append(
this.innerHTML);
}
else {
InputText.append(
'[' + $(
this).find(
'img').attr(
'data-alias')+
']');
}
});
}
else{
_emojiBox.toggle();
}
}
);
_box.find(
'[data="confirm"]').on(
'click',
function(){
addRow({detail:InputText.html()});
if(fn){fn();}
});
$(document).on(
'click',
function(e) {
if ((_emojiBox.find($(e.target)).length) <=
0 && (_box.find($(e.target)).length <=
0)) {
_emojiBox.hide();
}
});
}
function addRow(o){
console.log();
var html =
'';
html +=
'<div class="li">';
html +=
'<div class="icon">';
html +=
'<img src="';
html +=
'img/AcFun/1.png';
html +=
'"/>';
html +=
'</div>';
html +=
'<div class="content">';
html +=
'<div class="name">';
html +=
'adrian';
html +=
'</div>';
html +=
'<div class="time">';
html +=
'一小时前';
html +=
'</div>';
html +=
'<div class="text">';
html += o.detail;
html +=
'</div>';
html +=
'</div>';
html +=
'</div>';
var li = $(html);
console.log(o.detail);
$(
'.commentBox').append(li);
}
css
.InputBox {
width: 100%;
bottom: 0;
background: #f2f0f2;
border-top: 2px solid #bbbbbb;
padding: 8px;
}
.InputBox .input {
position: relative;
width: 100%;
min-height: 30px;
overflow: hidden;
}
.InputBox .text {
-webkit-user-select: auto;
float: left;
width: 79%;
min-height: 30px;
max-height: 70px;
overflow-y: auto;
border: 1px solid #bbbbbb;
border-radius: 10px;
background: #ffffff;
}
.InputBox .btnGroup {
position: absolute;
right: 0;
width: 19%;
height: 35px;
}
.InputBox .btn{
position: absolute;
width: 40%;
padding: 0;
margin: 0;
}
.InputBox .btn img{
width: 30px;
}
.emojiBox {
width: 95%;
border: 1px solid gray;
position: relative;
display: none;
background-color: #fff;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
.emojiBox>
.emoji_container >
section >
._img img {
float: left;
max-width: 48px;
max-height: 48px;
margin-left: -1px;
margin-top: -1px;
position: relative;
cursor: pointer;
}
.emojiBox>
img:hover {
background-color: #efefef;
}
.emojiBox>
img:active {
padding: 4px 3px 2px 3px;
}
.emoji_tab {
position: relative;
border-top: 1px solid gray;
height: 2em;
line-height: 2em;
white-space: nowrap;
overflow-x: auto;
bottom: 0;
left: 0;
right: 0;
}
.emoji_tab a {
display: inline-block;
text-decoration: none;
height: 1em;
line-height: 1em;
padding: .2em .5em;
background-color: gray;
box-shadow: 1px 1px 3px gray;
border-radius: 5px;
margin: 0 .2em;
}
.emoji_container {
height: 130px;
padding: .5em;
overflow: auto;
}
.emoji_container section {
display: none;
}
._img {
width:
}
.active {
background-color: black;
color: white;
}
.commentBox{
}
.commentBox .li{
padding: 5px;
display: -webkit-flex;
border-bottom: 1px solid #f2f4f5;
}
.commentBox .icon{
display: table-cell;
width: 60px;
}
.commentBox .icon img{
margin: 10px;
width: 30px;
border-radius: 30px;
border: 1px solid #BBBBBB;
}
.commentBox .content{
display: table-cell;
width: auto;
}
.commentBox .name{
color: #acb0b3;
font-family: "微软雅黑";
font-size: 16px;
margin-top: 8px;
}
.commentBox .time{
margin-top: 2px;
font-family: "微软雅黑";
color: #d6d8da;
font-size: 10px;
}
.commentBox .text{
margin-top: 8px;
margin-bottom: 8px;
font-family: "微软雅黑";
color: #656b70;
}
转载请注明原文地址: https://ju.6miu.com/read-965661.html
