利用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>