当点击上面的按钮，例如添加图片，就会直接向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" onclick="a()" title="添加超链接" class="a">
<input type="button" onclick="p()" title="添加段落" class="p">
<input type="button" onclick="font14()" title="添加14号字体" class="font14">
<input type="button" onclick="font15()" title="添加15号字体" class="font15">
<input type="button" onclick="font16()" title="添加16号字体" class="font16">
<input type="button" onclick="left()" title="左对齐" class="left">
<input type="button" onclick="center()" title="居中对齐" class="center">
<input type="button" onclick="right()" title="右对齐" class="left">
<input type="button" onclick="b()" title="加粗" class="b">
<input type="button" onclick="red()" title="红色字体" class="red">
<input type="button" onclick="blue()" title="蓝色字体" class="blue">
<input type="button" onclick="image()" title="图片" class="images">
<input type="button" onclick="video()" title="视频" class="video">
<input type="button" onclick="br()" title="换行" class="br">
<br/><br/>
<textarea id="txt" cols="80" rows="10" name="text"></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=‘‘ 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=‘‘>"+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=‘‘></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>项目源码+资源：点击下载