当点击上面的按钮，，例如添加图片，就会直接向textarea文本框添加一段预设的图片标签。如果添加超链接，就会向文本框添加超链接标签，我们只需要把超链接和链接文字填上去即可。
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">
.a{background: url(images/a.png)no-repeat; border:none;outline:none;width: 50px;height: 35px;}
.p{background: url(images/p.png)no-repeat; border:none;outline:none;width: 50px;height: 35px;}
.left{background: url(images/left.png)no-repeat; border:none;outline:none;width: 50px;height: 35px;}
.center{background: url(images/center.png)no-repeat; border:none;outline:none;width: 50px;height: 35px;}
.right{background: url(images/right.png)no-repeat; border:none;outline:none;width: 50px;height: 35px;}
.b{background: url(images/b.png)no-repeat; border:none;outline:none;width: 50px;height: 35px;}
.images{background: url(images/images.png)no-repeat; border:none;outline:none;width: 50px;height: 35px;}
.video{background: url(images/video.png)no-repeat; border:none;outline:none;width: 50px;height: 35px;}
.font14{background: url(images/14.png)no-repeat; border:none;outline:none;width: 50px;height: 35px;}
.font15{background: url(images/15.png)no-repeat; border:none;outline:none;width: 50px;height: 35px;}
.font16{background: url(images/16.png)no-repeat; border:none;outline:none;width: 50px;height: 35px;}
.red{background: url(images/red.png)no-repeat; border:none;outline:none;width: 50px;height: 35px;}
.blue{background: url(images/blue.png)no-repeat; border:none;outline:none;width: 50px;height: 35px;}
.br{background: url(images/br.png)no-repeat; border:none;outline:none;width: 50px;height: 35px;}
.a:hover{box-shadow: 0px 0px 3px #ddd; cursor: pointer;border-radius: 3px;}
.p:hover{box-shadow: 0px 0px 3px #ddd; cursor: pointer;border-radius: 3px;}
.left:hover{box-shadow: 0px 0px 3px #ddd; cursor: pointer;border-radius: 3px;}
.center:hover{box-shadow: 0px 0px 3px #ddd; cursor: pointer;border-radius: 3px;}
.right:hover{box-shadow: 0px 0px 3px #ddd; cursor: pointer;border-radius: 3px;}
.b:hover{box-shadow: 0px 0px 3px #ddd; cursor: pointer;border-radius: 3px;}
.images:hover{box-shadow: 0px 0px 3px #ddd; cursor: pointer;border-radius: 3px;}
.video:hover{box-shadow: 0px 0px 3px #ddd; cursor: pointer;border-radius: 3px;}
.font14:hover{box-shadow: 0px 0px 3px #ddd; cursor: pointer;border-radius: 3px;}
.font15:hover{box-shadow: 0px 0px 3px #ddd; cursor: pointer;border-radius: 3px;}
.font16:hover{box-shadow: 0px 0px 3px #ddd; cursor: pointer;border-radius: 3px;}
.red:hover{box-shadow: 0px 0px 3px #ddd; cursor: pointer;border-radius: 3px;}
.blue:hover{box-shadow: 0px 0px 3px #ddd; cursor: pointer;border-radius: 3px;}
.br:hover{box-shadow: 0px 0px 3px #ddd; cursor: pointer;border-radius: 3px;}
#txt{outline: none;resize:none;border:1px solid #c2c2c2;}
</style>
</head>
<body>
<form action="do.php" method="post">
<input type="button" title="添加超链接">
<input type="button" title="添加段落">
<input type="button" title="添加14号字体">
<input type="button" title="添加15号字体">
<input type="button" title="添加16号字体">
<input type="button" title="左对齐">
<input type="button" title="居中对齐">
<input type="button" title="右对齐">
<input type="button" title="加粗">
<input type="button" title="红色字体">
<input type="button" title="蓝色字体">
<input type="button" title="图片">
<input type="button" title="视频">
<input type="button" title="换行">
<br/><br/>
<textarea cols="80" rows="10"></textarea><br/><br/>
<input type="submit">
</form>
</body>
<script>
var txt = document.getElementById("txt");
txt.value = "";
function a(value){
var temp = txt.value;
txt.focus();
var pointIndex = txt.selectionStart;
var str1 = temp.substr(0,pointIndex);
var str2 = temp.substr(pointIndex,temp.length);
txt.value = str1+"<a href=http://www.mamicode.com/‘‘ style=‘color:#607FA6;‘></a>"+str2;
var newIndex = pointIndex+34;
txt.setSelectionRange(newIndex,newIndex);
};
function p(value){
var temp = txt.value;
txt.focus();
var pointIndex = txt.selectionStart;
var str1 = temp.substr(0,pointIndex);
var str2 = temp.substr(pointIndex,temp.length);
txt.value = str1+"<p></p>"+str2;
var newIndex = pointIndex+3;
txt.setSelectionRange(newIndex,newIndex);
};
function font14(value){
var temp = txt.value;
txt.focus();
var pointIndex = txt.selectionStart;
var str1 = temp.substr(0,pointIndex);
var str2 = temp.substr(pointIndex,temp.length);
txt.value = str1+"<font style=‘font-size:14px;‘></font>"+str2;
var newIndex = pointIndex+30;
txt.setSelectionRange(newIndex,newIndex);
};
function font15(value){
var temp = txt.value;
txt.focus();
var pointIndex = txt.selectionStart;
var str1 = temp.substr(0,pointIndex);
var str2 = temp.substr(pointIndex,temp.length);
txt.value = str1+"<font style=‘font-size:15px;‘></font>"+str2;
var newIndex = pointIndex+30;
txt.setSelectionRange(newIndex,newIndex);
};
function font16(value){
var temp = txt.value;
txt.focus();
var pointIndex = txt.selectionStart;
var str1 = temp.substr(0,pointIndex);
var str2 = temp.substr(pointIndex,temp.length);
txt.value = str1+"<font style=‘font-size:16px;‘></font>"+str2;
var newIndex = pointIndex+30;
txt.setSelectionRange(newIndex,newIndex);
};
function left(value){
var temp = txt.value;
txt.focus();
var pointIndex = txt.selectionStart;
var str1 = temp.substr(0,pointIndex);
var str2 = temp.substr(pointIndex,temp.length);
txt.value = str1+"<p style=‘text-align:left;‘></p>"+str2;
var newIndex = pointIndex+28;
txt.setSelectionRange(newIndex,newIndex);
};
function center(value){
var temp = txt.value;
txt.focus();
var pointIndex = txt.selectionStart;
var str1 = temp.substr(0,pointIndex);
var str2 = temp.substr(pointIndex,temp.length);
txt.value = str1+"<p style=‘text-align:center;‘></p>"+str2;
var newIndex = pointIndex+30;
txt.setSelectionRange(newIndex,newIndex);
};
function right(value){
var temp = txt.value;
txt.focus();
var pointIndex = txt.selectionStart;
var str1 = temp.substr(0,pointIndex);
var str2 = temp.substr(pointIndex,temp.length);
txt.value = str1+"<p style=‘text-align:right;‘></p>"+str2;
var newIndex = pointIndex+29;
txt.setSelectionRange(newIndex,newIndex);
};
function b(value){
var temp = txt.value;
txt.focus();
var pointIndex = txt.selectionStart;
var str1 = temp.substr(0,pointIndex);
var str2 = temp.substr(pointIndex,temp.length);
txt.value = str1+"<p style=‘font-weight:bold;‘></p>"+str2;
var newIndex = pointIndex+29;
txt.setSelectionRange(newIndex,newIndex);
};
function red(value){
var temp = txt.value;
txt.focus();
var pointIndex = txt.selectionStart;
var str1 = temp.substr(0,pointIndex);
var str2 = temp.substr(pointIndex,temp.length);
txt.value = str1+"<font style=‘color:#f00;‘></font>"+str2;
var newIndex = pointIndex+26;
txt.setSelectionRange(newIndex,newIndex);
};
function blue(value){
var temp = txt.value;
txt.focus();
var pointIndex = txt.selectionStart;
var str1 = temp.substr(0,pointIndex);
var str2 = temp.substr(pointIndex,temp.length);
txt.value = str1+"<font style=‘color:#39f;‘></font>"+str2;
var newIndex = pointIndex+26;
txt.setSelectionRange(newIndex,newIndex);
};
function image(value){
var temp = txt.value;
txt.focus();
var pointIndex = txt.selectionStart;
var str1 = temp.substr(0,pointIndex);
var str2 = temp.substr(pointIndex,temp.length);
txt.value = str1+"<img src=http://www.mamicode.com/‘‘>"+str2;
var newIndex = pointIndex+10;
txt.setSelectionRange(newIndex,newIndex);
};
function video(value){
var temp = txt.value;
txt.focus();
var pointIndex = txt.selectionStart;
var str1 = temp.substr(0,pointIndex);
var str2 = temp.substr(pointIndex,temp.length);
txt.value = str1+"<video src=http://www.mamicode.com/‘‘></video>"+str2;
var newIndex = pointIndex+12;
txt.setSelectionRange(newIndex,newIndex);
};
function br(value){
var temp = txt.value;
txt.focus();
var pointIndex = txt.selectionStart;
var str1 = temp.substr(0,pointIndex);
var str2 = temp.substr(pointIndex,temp.length);
txt.value = str1+"<br/>"+str2;
var newIndex = pointIndex+5;
txt.setSelectionRange(newIndex,newIndex);
}
</script>
</html>
项目源码+资源：点击下载
Jm-杰米博客Jamie
草根站长的技术交流乐园！IT不会不要紧快来好好学习吧！ 
![[转]Node.js中package.json中^和~的区别](/uploads/allimg/200519/054J34453_lit.png "[转]Node.js中package.json中^和~的区别")