1.引入头文件（注意一定要把jQuery放在前面）：
Html代码
<script src="lib/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="lib/htmlbox/htmlbox.colors.js"></script>
<script type="text/javascript" src="lib/htmlbox/htmlbox.styles.js"></script>
<script type="text/javascript" src="lib/htmlbox/htmlbox.syntax.js"></script>
<script type="text/javascript" src="lib/htmlbox/htmlbox.undoredomanager.js"></script>
<script type="text/javascript" src="lib/htmlbox/htmlbox.min.js"></script>
2.在需要使用HtmlBox的<textarea>后面加入javascript代码：
Html代码
<textarea id="htmlbox_icon_set_green" class="text_area2" cols="32" rows="3" name="content"></textarea>
<script language="Javascript" type="text/javascript">
var hb_icon_set_green = $("#htmlbox_icon_set_green").css("height","400").css("width","583").htmlbox({
toolbars:[
["cut","copy","paste","separator_dots","bold","italic","underline","strike","sub","sup","separator_dots","undo","redo","separator_dots",
"left","center","right","justify","separator_dots","ol","ul","indent","outdent","separator_dots","link","unlink","image"],
["code","removeformat","striptags","separator_dots","quote","paragraph","hr","separator_dots",
{icon:"new.gif",tooltip:"New",command:function(){hb_icon_set_green.set_text("<p></p>")}},
{icon:"open.gif",tooltip:"Open",command:function(){alert('Open')}},
{icon:"save.gif",tooltip:"Save",command:function(){alert('Save')}}
]
],
icons:"default",
skin:"green"
})
</script>
原本的<textarea>就会变成一个功能强大的编辑器。
说到盒子的颜色，除了背景色和边框我再不清楚你指的什么颜色了。我把这两个给你写出来
背景色的，假设盒子的class='box-color'
.box-color{background-color:#ccc
}
边框颜色的，
.box-color{border:2px solid #f00
}
当然，设定这些时，盒子的宽高得指定好
.box-color{width:200px
height:200px
}
<style>.box1 { margin: auto text-align: center width: 300px }
.box1, .box2, .box3 { border: 1px solid black padding: 20px }
.box2, .box3 { margin: auto }
</style>
<div class="box1">
<div class="box2">
<div class="box3">
</div>
</div>
</div>
