<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery.min.js"></script>
<style>
.commentBox{
width:700px;
margin:0 auto;
position:relative;
}
.commentBox .textArea{
width:100%;
min-height: 100px;
border:1px solid #ddd;
padding:5px;
line-height:20px;
word-break: break-all;
}
.commentBox .textArea img{
width:24px;
height: 24px;
vertical-align: bottom;
}
.faceIcon{
margin:10px;
display: block;
width:24px;
height: 24px;
background: url("头像.png") no-repeat;
background-size: 100%;
}
.commentBox .faceBox{
position:absolute;
width:410px;
height:250px;
padding:10px 5px;
border:1px solid #ddd;
display: none;
background-color: #fff;
}
.commentBox .faceBox img{
width:24px;
height:24px;
}
</style>
</head>
<body>
<div class="commentBox">
<div class="textArea" id="editor" contenteditable="true"></div>
<span class="faceIcon">点击添加表情</span>
<div class="faceBox"></div>
</div>
<script>
var editorX=document.getElementById("editor");
$(function(){
for(var i=0;i<120;i++){
var imgNum="";
if(i<10){
imgNum="00"+i;
}else if(i>=10&&i<100){
imgNum="0"+i;
}else{
imgNum=i;
}
$('<img>').attr('src','face/f_static_'+imgNum+'.png').appendTo($(".faceBox"));
}
$(".faceIcon").on("click",function(){
$(this).parent().find(".faceBox").toggle();
});
$(".faceBox").on("click","img",function(){
var emoji=$(this).attr("src");
$(".textArea").focus();
var source='<img src="'+emoji+'">'
insertContent(source);
$(this).parent().hide();
});
editorX.onblur=function(){
saveRange();
};
//保存光标位置
function saveRange() {
var selection = window.getSelection ? window.getSelection() : document.selection;
if (!selection.rangeCount) return;
var range = selection.createRange ? selection.createRange() : selection.getRangeAt(0);
window._range = range;
}
//插入内容
function insertContent(str) {
var selection, range = window._range;
if (!window.getSelection) {
range.pasteHTML(str);
range.collapse(false);
range.select();
} else {
selection = window.getSelection ? window.getSelection() : document.selection;
range.collapse(false);
var hasR = range.createContextualFragment(str);
var hasR_lastChild = hasR.lastChild;
while (hasR_lastChild && hasR_lastChild.nodeName.toLowerCase() == "br" && hasR_lastChild.previousSibling && hasR_lastChild.previousSibling.nodeName.toLowerCase() == "br") {
var e = hasR_lastChild;
hasR_lastChild = hasR_lastChild.previousSibling;
hasR.removeChild(e);
}
range.insertNode(hasR);
if (hasR_lastChild) {
range.setEndAfter(hasR_lastChild);
range.setStartAfter(hasR_lastChild);
}
selection.removeAllRanges();
selection.addRange(range);
}
};
})
</script>
</body>
</html>
添加回答
举报
0/150
提交
取消