如何简易实现富文本编辑器一样的功能
1、我们创建一个div，给它一个id--box，重要的在这里-->contenteditable="true"，不然div的内容我们是编辑不了的，<p id="box" contenteditable="true">哈哈哈我是测试文本</p>
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">哈哈哈我是测试文本</p><input type="text"><script> $("#h").change(function () { document.execCommand("formatBlock",false,$("#h").val()); });</script></body></html>
5、其他功能类似，只不过是参数存在不同而已，我说了下大概的原理.嗯~大概就这样