js向指定位置插入表情或者文字

xiaoai5324 2014-06-09 01:56:31

<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
<title>phplamp站-如何向textarea标签中插入图片</title>
<script language="javascript" src="jquery-1.7.2.min.js"></script>
<script language="javascript" src="jquery.emoticons.js"></script>

<style>
ul li {
float:left;
margin:5px;
}
</style>
</head>
<body>

<script language="javascript">
var em = [
{'id':1,'phrase':'[呵呵]','url':'emotions/1.gif'},{'id':2,'phrase':'[嘻嘻]','url':'emotions/2.gif'},
{'id':3,'phrase':'[哈哈]','url':'emotions/3.gif'},{'id':4,'phrase':'[可爱]','url':'emotions/4.gif'},
{'id':5,'phrase':'[可怜]','url':'emotions/5.gif'},{'id':6,'phrase':'[挖鼻孔]','url':'emotions/6.gif'},
{'id':7,'phrase':'[吃惊]','url':'emotions/7.gif'},{'id':8,'phrase':'[害羞]','url':'emotions/8.gif'},
{'id':9,'phrase':'[挤眼]','url':'emotions/9.gif'},{'id':10,'phrase':'[闭嘴]','url':'emotions/10.gif'},
{'id':11,'phrase':'[鄙视]','url':'emotions/11.gif'},{'id':12,'phrase':'[爱你]','url':'emotions/12.gif'},
{'id':13,'phrase':'[流泪]','url':'emotions/13.gif'},{'id':14,'phrase':'[偷笑]','url':'emotions/14.gif'},
{'id':15,'phrase':'[亲亲]','url':'emotions/15.gif'},{'id':16,'phrase':'[生病]','url':'emotions/16.gif'},
{'id':17,'phrase':'[开心]','url':'emotions/17.gif'},{'id':18,'phrase':'[懒得理你]','url':'emotions/18.gif'},
{'id':19,'phrase':'[左哼哼]','url':'emotions/19.gif'},{'id':20,'phrase':'[右哼哼]','url':'emotions/20.gif'},
{'id':21,'phrase':'[嘘]','url':'emotions/21.gif'},{'id':22,'phrase':'[衰]','url':'emotions/22.gif'},
{'id':23,'phrase':'[委屈]','url':'emotions/23.gif'},{'id':24,'phrase':'[吐]','url':'emotions/24.gif'},
{'id':25,'phrase':'[打哈欠]','url':'emotions/25.gif'},{'id':26,'phrase':'[抱抱]','url':'emotions/26.gif'},
{'id':27,'phrase':'[怒]','url':'emotions/27.gif'},{'id':28,'phrase':'[疑问]','url':'emotions/28.gif'},
{'id':29,'phrase':'[馋嘴]','url':'emotions/29.gif'},{'id':30,'phrase':'[拜拜]','url':'emotions/30.gif'},
{'id':31,'phrase':'[思考]','url':'emotions/31.gif'},{'id':32,'phrase':'[汗]','url':'emotions/32.gif'},
{'id':33,'phrase':'[困]','url':'emotions/33.gif'},{'id':34,'phrase':'[睡觉]','url':'emotions/34.gif'},
{'id':35,'phrase':'[钱]','url':'emotions/35.gif'},{'id':36,'phrase':'[失望]','url':'emotions/36.gif'},
{'id':37,'phrase':'[酷]','url':'emotions/37.gif'},{'id':38,'phrase':'[花心]','url':'emotions/38.gif'},
{'id':39,'phrase':'[哼]','url':'emotions/39.gif'},{'id':40,'phrase':'[鼓掌]','url':'emotions/40.gif'},
{'id':41,'phrase':'[晕]','url':'emotions/41.gif'},{'id':42,'phrase':'[悲伤]','url':'emotions/42.gif'},
{'id':43,'phrase':'[抓狂]','url':'emotions/43.gif'},{'id':44,'phrase':'[黑线]','url':'emotions/44.gif'},
{'id':45,'phrase':'[阴脸]','url':'emotions/45.gif'},{'id':46,'phrase':'[怒骂]','url':'emotions/46.gif'},
{'id':47,'phrase':'[心]','url':'emotions/47.gif'},{'id':48,'phrase':'[伤心]','url':'emotions/48.gif'},
{'id':49,'phrase':'[猪头]','url':'emotions/49.gif'},{'id':50,'phrase':'[OK]','url':'emotions/50.gif'},
{'id':51,'phrase':'[耶]','url':'emotions/51.gif'},{'id':52,'phrase':'[good]','url':'emotions/52.gif'},
{'id':53,'phrase':'[不要]','url':'emotions/53.gif'},{'id':54,'phrase':'[赞]','url':'emotions/54.gif'},
{'id':55,'phrase':'[来]','url':'emotions/55.gif'},{'id':56,'phrase':'[弱]','url':'emotions/56.gif'},
{'id':57,'phrase':'[蜡烛]','url':'emotions/57.gif'},{'id':58,'phrase':'[钟]','url':'emotions/58.gif'},
{'id':59,'phrase':'[蛋糕]','url':'emotions/59.gif'},{'id':60,'phrase':'[话筒]','url':'emotions/60.gif'}
];

var faceHtml = '<div id="face">';
faceHtml += '<div id="texttb"><a class="f_close" title="关闭" href="javascript:void(0);"></a></div>';
faceHtml += '<div id="facebox">';
faceHtml += '<div id="face_detail" class="facebox clearfix"><ul>';

for( i = 0; i < em.length; i++) {
faceHtml += '<li text=' + em[i].phrase + ' type=' + i + '><img title=' + em[i].phrase + ' src="'+ em[i].url + '" style="cursor:pointer; position:relative;" class="pic" /></li>';
}
faceHtml += '</ul></div>';
faceHtml += '</div><div class="arrow arrow_t"></div></div>';

</script>
<div style="width:400px;height:200px;border:1px solid #ccc;" contenteditable="true" ><img id="test">4612</div>
<input type="button" id="but" value="试试吧">
<div style="width:400px;height:250px;border:1px solid #ccc;display:none;position:absolute;" id="abc"></div>

<script type="text/javascript">

$(".pic").live("click",function(){
url = $(this).attr("src");
$("#test").attr('src',url);
$("#abc").hide();

})

$("#but").click(function(){
x=$(this).offset();
$("#abc").css({
'top':x.top+30,
'left':x.left+10
});
console.info(faceHtml);
$("#abc").html(faceHtml);
$("#abc").show();
})

})
</script>
</body>
</html>
我现在做了个发表评论的功能，这是个表情框，想做个类似qq聊天那样子，就是我光标放哪里，就可以在哪里插入表情和文字，现在表情只能放到最后，而且只能插入一个表情，求高手帮忙看下怎么可以插入多个表情，而且可以让光标放哪里就在哪里插入表情

...全文