<!-- -- 富文本編輯器的簡單實現原理 -- 參考文檔： -- 1. w3cshool：https://www.w3cschool.cn/javascript/javascript-execcommand.html -- 2. 火狐開發者中心：https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand -- -- 要點：1. 添加div標簽的一個屬性contenteditable設置為true，使該div元素可編輯； -- 2. js調用document.execCommand(指令參數[命令], false, 動態參數[值])函數， -- 3. 函數中第二個參數應始終為false，因為參數為true會顯示對話框，而火狐並不支持。 -- 4. document.execCommand("paste"); 為粘貼命令，瀏覽器默認未開啟，需要在user.js配置文件中開啟。 --> <!DOCTYPE html> <html> <head> <title>富文本編輯器實現原理</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" /> <style> #edit{ height:260px; width:100%; overflow: scroll; border:solid 1px black } </style> </head> <body> <div id="edit" name="edit" contenteditable="true"></div> <br> <button name="button-edit" data-name="justifyCenter">居中</button> <button name="button-edit" data-name="justifyLeft">左對齊</button> <button name="button-edit" data-name="justifyRight">右對齊</button> <button name="button-edit" data-name="indent">添加縮進</button> <button name="button-edit" data-name="outdent">去掉縮進</button> <button name="button-edit" data-name="fontname" data-value="宋體">宋體</button> <button name="button-edit" data-name="fontsize" data-value="5">大字體</button> <button name="button-edit" data-name="forecolor" data-value="red">紅色字體</button> <button name="button-edit" data-name="backColor" data-value="lightgreen">淺綠背景</button> <button name="button-edit" data-name="bold">加粗</button> <button name="button-edit" data-name="italic">斜體</button> <button name="button-edit" data-name="underline">下划線</button> <button name="button-edit" data-name="copy">復制</button> <button name="button-edit" data-name="cut">剪切</button> <!--paste命令瀏覽器默認未開啟，需要在user.js配置文件中開啟，詳見火狐開發者中心文檔--> <!--鏈接：https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand--> <button name="button-edit" data-name="paste">粘貼</button> <button name="button-edit" data-name="selectAll">全選</button> <button name="button-edit" data-name="delete">刪除</button> <button name="button-edit" data-name="forwarddelete">后刪除</button> <button name="button-edit" data-name="removeFormat">清空格式</button> <button name="button-edit" data-name="redo">前進一步</button> <button name="button-edit" data-name="undo">后退一步</button> <button name="button-edit" data-name="print">打印</button> <button name="button-edit" data-name="formatblock" data-value="div">插入div</button> <button name="button-edit" data-name="inserthorizontalrule">插入hr</button> <button name="button-edit" data-name="insertorderedlist">插入ol</button> <button name="button-edit" data-name="insertunorderedlist">插入ul</button> <button name="button-edit" data-name="formatblock" data-value="p">插入p</button> <button name="button-edit" data-name="inserttext" data-value="這是我插入的內容！">插入文本</button> <button name="button-edit" data-name="insertimage" data-value="http://images.cnblogs.com/cnblogs_com/qingsong/545927/o_39.gif">插入圖像</button> <button name="button-edit" data-name="createlink" data-value="https://www.w3cschool.cn/javascript/javascript-execcommand.html">增加鏈接</button> <button name="button-edit" data-name="unlink">刪除鏈接</button> <input type="button" onclick="isPaste()" value="檢測paste粘貼命令是否支持"> <input type="button" value="代碼獲取" onclick="showContent()"> <script>
/** 當文檔載入完畢后，在富文本框內設置焦點， * 並且在第一行插入p標簽。 **/ window.onload = function(){ edit.focus(); document.execCommand("formatblock", false, "p"); } /** 在編輯框內，當鍵盤輸入時自動在當前行插入p標簽， * 也可以自動插入其它標簽， * 當編輯框內檢測到</li>標簽時禁止插入p標簽。 */ edit.onkeydown = function(){ var str = edit.innerHTML; var val = str.search(/<\/li>/i); if(val < 0){ document.execCommand("formatblock", false, "p"); } } var btns = document.getElementsByName('button-edit'); /** 編輯按鈕的js操作命令接口。 * 按鈕的data-name屬性存放命令，data-value屬性存放值。 * 也可用其它標簽代替。 **/ for(var i = 0; i < btns.length; i++){ btns[i].onclick = function(){ if(this.getAttribute('data-value') == ""){ document.execCommand(this.getAttribute('data-name')); }else{ document.execCommand(this.getAttribute('data-name'),false,this.getAttribute('data-value')); } } } /** 富文本內的值是通過div的innerHTML獲取的， * 表單提交時需提前用js轉移到隱藏域里，然后提交， * 為了便於理解富文本的結構，這里省略這一步了。 **/ function showContent() { alert(edit.innerHTML); } /** 檢測瀏覽器是否開啟或支持paste命令， * 函數反回值為Boolean， * true為支持，false為未開啟或不支持paste粘貼命令 * paste粘貼命令需要在user.js配置文件中開啟。 * 詳見火狐開發者中心相關文檔： * https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand **/ function isPaste(){ if(document.execCommand("paste")) { alert("瀏覽器支持或開啟了paste粘貼命令！"); }else{ alert("瀏覽器不支持paste粘貼命令，\n或未在user.js配置文件中開啟！"); } } </script> </body> </html>
注意事項：
用a或span元素添加onclick事件來執行document.execCommand()函數命令會失效，要用button或<input type="button">添加onclick事件來執行才會成功。尤其添加font awesome字體圖標時，button能夠添加字體圖標，但input不能添加字體圖標。如：
引入圖標字體：
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
添加鏈接按鈕圖標：
<button class="fa fa-link" onclick="addLink()"></button>
js函數執行：
function addLink(){ var lineVal=prompt("請輸入鏈接地址：",""); if(lineVal != null && lineVal != ''){ var patt=/[http|https]+:\/\/[^\s]*/i; if(patt.test(lineVal)){ document.execCommand("createlink", false, lineVal); }else{ alert("鏈接地址輸入格式錯誤，請重新輸入！"); } } }
但不能用
<span class="fa fa-link" onclick="addLink()"></span>
來執行，否則document.execCommand()函數執行的命令不成功。