利用jQuery實現最簡單的編輯器
之前遇到的問題是鼠標移出文本區域外點擊后還能記住選取內容？
后來在這個博客中找到了移方向，原文鏈接https://www.jianshu.com/p/50c433ec1c32，
在鼠標選中后，鼠標移出文本區域時觸發記錄選區內容的事件，在進入文本區域所恢復記錄內容就可以了。
目前最快捷能夠實現及其簡單的編輯可以使用類似的方法： document.execCommand("ForeColor", "false", sColor);就能實現。
但是看到 MDN web文檔上提示該方法已經廢棄。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <style type="text/css"> .editor_div { border: 1px solid #ccc; } .btn_div { border-bottom: 1px solid #ccc; height: 28px; } .span_btn { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; font-size: 21px; font-weight: 400; display: inline-block; margin-left: 21px; cursor: pointer; position: relative; } .editor_content { height: 200px; width: 100%; overflow: hidden; } .header_con { position: absolute; top: 28px; left: 0; background-color: #e8e8e8; display: none; width: 50px; text-align: center; } .header_hcon { height: 19px; width: 50px; border-top: 1px solid #ccc; display: inline-block; } </style> <body> <div class="editor_div"> <div class="btn_div"> <span class="span_btn" onclick="tobebold()" id="tobebold">加粗B</span> <span class="span_btn" onclick="showchildren(this)">標簽H <span class="header_con"> <span class="header_hcon" onclick="clcikthis(this)" data-type="H5">H5</span> <span class="header_hcon" onclick="clcikthis(this)" data-type="H4">H4</span> <span class="header_hcon" onclick="clcikthis(this)" data-type="H3">H3</span> <span class="header_hcon" onclick="clcikthis(this)" data-type="H2">H2</span> <span class="header_hcon" onclick="clcikthis(this)" data-type="H1">H1</span> <span class="header_hcon" onclick="clcikthis(this)" data-type="p">正文</span> </span> </span> <span class="span_btn" onclick="showchildren(this)">顏色C <span class="header_con"> <span class="header_hcon" onclick="changecolor(this)">red</span> <span class="header_hcon" onclick="changecolor(this)">blue</span> <span class="header_hcon" onclick="changecolor(this)">pink</span> <span class="header_hcon" onclick="changecolor(this)">gold</span> </span> </span> </div> <div class="editor_content" id="editor_content" tabindex="0" contenteditable="true"> </div> </div> </body> <script src="./jquery.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> function getslection() { if (window.getSelection) { //一般瀏覽器 return window.getSelection(); } else if (document.selection) { //IE瀏覽器、Opera return document.selection.createRange(); } } //獲取range選區 function getRange() { var sel, range; if (typeof window.getSelection != "undefined") { // 針對i9和其他非ie瀏覽器 sel = window.getSelection(); if (sel.getRangeAt && sel.rangeCount) { range = window.getSelection().getRangeAt(0); } } else if (document.selection && document.selection.type != "Control") { // 如果i8或者更低 range = document.selection.createRange(); } return range } var _currRange //存儲當前選區 // 保存選區（記錄光標位置） function saveRange() { _currRange = getRange(); } // 恢復選區 function restoreRange() { const selection = window.getSelection(); selection.removeAllRanges(); selection.addRange(_currRange); } //鼠標進入書寫區域離開后要記住選區 $("#editor_content").mouseleave(function() { const selection = window.getSelection() if(selection.toString() != ""){ saveRange() } }) //鼠標按下后抬起時也要記住選區 $("#editor_content").mouseup(function() { saveRange() }) //字體加粗 const tobebold = () => { restoreRange() document.execCommand("Bold", "false", null); saveRange() } // 展示菜單 const showchildren = (e) => { $(e).children("span").css({ "display": "inline-block" }) } //選擇標簽 const clcikthis = (e) => { restoreRange() userSelection = getslection() let hheader = $(e).attr("data-type") if (userSelection.toString().length != 0) { document.execCommand("FormatBlock", "false", hheader); } saveRange() event.stopPropagation(); $(e).parent().hide() return false } //改變顏色 const changecolor = (e) => { restoreRange() let sColor = $(e).html().toLowerCase() document.execCommand("ForeColor", "false", sColor); saveRange() event.stopPropagation(); $(e).parent().hide() return false } // 點擊除按鈕和彈框之外任意地方隱藏表情 $("body").click(function(e) { if (!$(e.target).closest(".span_btn").length) { $(".header_con").hide(); } }); </script> </html>
頁面效果如下
