HTML中的contentEditable的属性可以打开某些元素的可编辑状态．也许你没用过contentEditable属性．甚至从未听说过．contentEditable的作用相当神奇．可以让div或整个网页，以及span等等元素设置为可写。我们最常用的输入文本内容便是input与textarea，使用contentEditable属性后，可以在div,table,p,span,body,等等很多元素中输入内容．
点击按钮下方文字即可编辑文本信息，选中你编辑的文本，点击上方按钮会改变文本相应的字体。
HTML：
（记得引用jQuery）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="jquery-3.3.1.js"></script> <script src="index.js"></script> </head> <body> <h2>编辑器</h2> <div id="editor"> <button id="bold"><b>加粗</b></button> <button id="italic"><i>斜体</i></button> <button id="underline"><u>下划线</u></button> <div contentEditable="true" > 这里面<b>已经</b>有 <i>一些</i>富<u>文本</u>了 </div> </div> <script> new Editor('#editor') </script> </body> </html>JavaScript：
function Editor(selector){ this.$editor = $(selector) this.bindEvents_() } Editor.prototype.bindEvents_ = function(){ this.$editor.on('click' , 'button' , function(e){ switch(e.currentTarget.id){ case 'bold': document.execCommand('bold') break case 'italic': document.execCommand('italic') break case 'underline': document.execCommand('underline') break } }) }
