您的位置：首页 > 其它

自己制作简单的可编辑并添加表情的文本编辑器

2015-10-09 17:27 597 查看
自己动手制作编辑器

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<style type="text/css">
#textarea{
border:solid 1px #ccc;
width:300px;
height:200px;
padding:4px;
}
.img{cursor:pointer;}
</style>
</head>
<body>
<img src="./emoji/0x1f4a3.png" alt="" class="img" />
<img src="./emoji/0x1f3c3.png" alt="" class="img" />
<img src="./emoji/0x1f4af.png" alt="" class="img" />
<div>
<div contenteditable="true" id="textarea" cols="30" rows="10"></div>
</div>
<script type="text/javascript">
$(function(){
$(".img").click(function(){
var text=$("#textarea").html();
var src=$(this).attr("src");
var img="<img src='"+src+"' />";
$("#textarea").html(text+img);
});
});
</script>
</body>
</html>


效果如图

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航