如何简易实现富文本编辑器一样的功能
1、我们创建一个div，给它一个id--box，重要的在这里-->contenteditable="true"，不然div的内容我们是编辑不了的，<p id="box" contenteditable="true">哈哈哈我是测试文本
2、然后我们再创建一个下拉框select，用来选择需要执行的操作。
<select id="h"> <option>H1</option> <option>H2</option> <option>H3</option></select>
3、最后就是写脚本来执行了。
$("#h").change(function () { document.execCommand("formatBlock",false,
$("#h").val())});
这句代码的意思是当下拉框文本内容改变的时候，触发一个change事件，然后执行代码。代码
改变的是鼠标选择文本。
$("#h").val()是获取下拉框的值，
formatBlock-->《添加一个HTML块式标签在包含当前选择的行, 如果已经存在了，更换包含该
行的块元素 (在 Firefox中, BLOCKQUOTE 是一个例外 -它将包含任何包含块元素). 需要提供
一个标签名称字符串作为参数。几乎所有的块样式标签都可以使用(例如. "H1", "P", "DL",
"BLOCKQUOTE"). (IE浏览器仅仅支持标题标签 H1 - H6, ADDRESS, 和 PRE,使用时还必须包含
标签分隔符 < >, 例如 "<H1>".)》。
false-->《是否展示用户界面》
execCommand方法具体作用在MDN里面有，我这给个直链就不重复说明了。
https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand
4、完整代码：
<html>
<head>
<title>功能测试</title>
<script src="js/jquery.min.js"></script>
</head>
<body>
<select id="h">
<option>H1</option>
<option>H2</option>
<option>H3</option>
</select>
<p id="box" contenteditable="true">哈哈哈我是测试文本
<input type="text">
<script>
$("#h").change(function () {
document.execCommand("formatBlock",false,$("#h").val());
});
</script>
</body>
</html>
5、其他功能类似，只不过是参数存在不同而已，我说了下大概的原理.嗯~大概就这样