1、借助HTML DOM的 contentEditable 属性
（描述元素的内容是否可编辑）来让div内容可编辑
2、document的execCommand 方法
该方法允许运行命令来操纵可编辑内容区域的元素。当使用contentEditable时，调用 execCommand() 将影响当前活动的可编辑元素。如何使用可以查看execCommandMDN对应的文档说明
以下为富文本编辑器完整代码：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>富文本编辑器G</title>
<link href="/static/assets/vendors/bootstrap/css/bootstrap.css" rel="stylesheet">
<style>
body{
padding: 100px 200px;
}
#editor {
height:500px;
margin: 30px;
}
</style>
</head>
<body>
<div id="editparent">
<!-- 编辑器控制按钮 -->
<div id='editControls' style='text-align:center; padding:5px;'>
<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>
<!-- 编辑器可输入内容处 -->
<div id='editor' class='form-control' contenteditable>
<h3>在这里输入内容</h3>
</div>
</div>
<script src="/static/assets/vendors/jquery/jquery.js"></script>
<script>
$(function() {
$('#editControls a').click(function(e) {
document.execCommand($(this).data('role'), false, null);
})
});
</script>
</body>
</html>
在浏览器中界面显示：
