代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
/>
<meta name="author" content="lauwcy" />
<title>Bootstrap</title>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/font-awesome.min.css" rel="stylesheet" />
<style>
#editor {
resize: vertical;
overflow: auto;
border: 1px solid silver;
border-radius: 5px;
min-height: 100px;
box-shadow: inset 0 0 10px silver;
padding: 1em;
}
</style>
</head>
<body>
<div class="content">
<div class="container-fluid">
<div id="pad-wrapper">
<div id="editparent">
<div
id="editControls"
class="span12"
style="text-align: center; padding: 5px"
>
<div class="btn-group">
<a class="btn" data-role="undo" href="#"
><i class="icon-undo"></i
></a>
<a class="btn" data-role="redo" href="#"
><i class="icon-repeat"></i
></a>
</div>
<div class="btn-group">
<a class="btn" data-role="bold" href="#"><b>Bold</b></a>
<a class="btn" data-role="italic" href="#"><em>Italic</em></a>
<a class="btn" data-role="underline" href="#"
><u><b>U</b></u></a
>
<a class="btn" data-role="strikeThrough" href="#"
><strike>abc</strike></a
>
</div>
<div class="btn-group">
<a class="btn" data-role="justifyLeft" href="#"
><i class="icon-align-left"></i
></a>
<a class="btn" data-role="justifyCenter" href="#"
><i class="icon-align-center"></i
></a>
<a class="btn" data-role="justifyRight" href="#"
><i class="icon-align-right"></i
></a>
<a class="btn" data-role="justifyFull" href="#"
><i class="icon-align-justify"></i
></a>
</div>
<div class="btn-group">
<a class="btn" data-role="indent" href="#"
><i class="icon-indent-right"></i
></a>
<a class="btn" data-role="outdent" href="#"
><i class="icon-indent-left"></i
></a>
</div>
<div class="btn-group">
<a class="btn" data-role="insertUnorderedList" href="#"
><i class="icon-list-ul"></i
></a>
<a class="btn" data-role="insertOrderedList" href="#"
><i class="icon-list-ol"></i
></a>
</div>
<div class="btn-group">
<a class="btn" data-role="h1" href="#">h<sup>1</sup></a>
<a class="btn" data-role="h2" href="#">h<sup>2</sup></a>
<a class="btn" data-role="p" href="#">p</a>
</div>
<div class="btn-group">
<a class="btn" data-role="subscript" href="#"
><i class="icon-subscript"></i
></a>
<a class="btn" data-role="superscript" href="#"
><i class="icon-superscript"></i
></a>
</div>
</div>
<div id="editor" class="span12" contenteditable>
<h1>This is a title!</h1>
<p>This is a content!</p>
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script>
$(function () {
$("#editControls a").click(function (e) {
switch ($(this).data("role")) {
case "h1":
case "h2":
case "p":
document.execCommand(
"formatBlock",
false,
"<" + $(this).data("role") + ">"
);
break;
default:
document.execCommand($(this).data("role"), false, null);
break;
}
});
});
</script>
</body>
</html>
效果如下：
