利用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>
页面效果如下
