利用jQuery实现最简单的编辑器
我试了很多种方法，目前最快捷能够实现及其简单的编辑可以使用 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"> if (window.getSelection) { //一般浏览器 userSelection = window.getSelection(); } else if (document.selection) { //IE浏览器、Opera userSelection = document.selection.createRange(); } var oldHtml = "" var oldStr = "" var newHtml = "" var newStr = "" const tobebold = () => { document.execCommand("Bold", "false", null); } const showchildren = (e) => { $(e).children("span").css({ "display": "inline-block" }) } const clcikthis = (e) => { let hheader = $(e).attr("data-type") if (userSelection.toString().length != 0) { document.execCommand("FormatBlock", "false", hheader); } event.stopPropagation(); $(e).parent().hide() return false } const changecolor = (e) => { let sColor = $(e).html().toLowerCase() document.execCommand("ForeColor", "false", sColor); event.stopPropagation(); $(e).parent().hide() return false } // 点击后除指定位置外其他地方都会隐藏 $("body").click(function(e) { if (!$(e.target).closest(".span_btn").length) { $(".header_con").hide(); } }); </script> </html>
图片效果如下