js简单富文本编辑器效果代码实例
分类：实例代码
本章一段代码实例，实现了简单的富文本编辑器功能。
当然这个效果不一定有实用价值，不过可以学习一下知识和开阔一下编程思路。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
label {
cursor: pointer;
}
#wrap {
width: 80%;
height: 400px;
margin: 20px auto;
box-shadow: #272727 0px 0px 5px;
}
.menu {
width: 100%;
height: 49px;
border-bottom: 1px solid #272727;
}
.menu > li {
line-height: 49px;
height: 49px;
float: left;
padding: 0 10px;
cursor: pointer;
text-align: center;
position: relative;
}
.menu > li:after {
content: "|";
width: 5px;
position: absolute;
right: 0;
top: 0;
}
.menu > li label {
width: 100%;
height: 100%;
display: inline-block;
}
.edit_wrap {
width: 96%;
padding: 2%;
height: calc(100% - 50px - 4%);
overflow: auto;
line-height: 1.5;
outline: none;
}
.btnBox {
display: none;
position: absolute;
left: 0;
top: 49px;
width: 100%;
}
.btnBox > li {
width: 100%;
height: 35px;
line-height: 35px;
text-align: center;
background: #fff;
}
input {
border: none;
width: 100%;
height: 100%;
cursor: pointer;
outline: none;
font-size: 16px;
background: inherit;
}
.menu li:hover ul {
display: block;
}
.btnBox > li:hover, .menu > li:hover {
background: #CCCCCC;
}
.item {
list-style-type: square !important;
margin-left: 10px;
}
</style>
<script>
window.onload = function() {
var editWrap = document.querySelector(".edit_wrap"),
setSizeBtn = document.querySelectorAll(".size"),
setFormatBtn = document.querySelectorAll(".format"),
setColorBtn = document.querySelectorAll(".color"),
setBGColorBtn = document.querySelectorAll(".BGcolor"),
Fbtn = document.querySelectorAll(".Fbtn"),
Tbtn = document.querySelectorAll(".Tbtn");
for (var i = 0; i < 4; i++) {
setSizeBtn[i].addEventListener("click", setTxtStyle);
setColorBtn[i].addEventListener("click", setTxtStyle);
setBGColorBtn[i].addEventListener("click", setTxtStyle);
setFormatBtn[i].addEventListener("click", setTxtStyle);
};
for (var i = 0; i < Fbtn.length; i++) {
Fbtn[i].addEventListener("click", setTxtStyle);
};
function setTxtStyle(e) {
var that = e.target,
type = "",
bool = false,
valueTxt = this.getAttribute("data") || "";
switch (that.className) {
case "color":
type = "ForeColor";
break;
case "size":
type = "FontSize";
break;
case "BGcolor":
type = "BackColor";
break;
case "format":
type = this.getAttribute("data-type");
break;
case "Fbtn":
type = this.getAttribute("data-type");
break;
default:
break;
};
document.execCommand(type, bool, valueTxt);
};
}
</script>
</head>
<body>
<div id="wrap">
<ul class="menu">
<li>
颜色
<ul class="btnBox fontColorWrap">
<li><input type="button" class="color" value="红" data="red" /></li>
<li><input type="button" class="color" value="黄" data="yellow" /></li>
<li><input type="button" class="color" value="绿" data="green" /></li>
<li><input type="button" class="color" value="蓝" data="blue" /></li>
</ul>
</li>
<li>
字号
<ul class="btnBox fontSizeWrap">
<li><input type="button" class="size" value="15px" data="15" /></li>
<li><input type="button" class="size" value="20px" data="20" /></li>
<li><input type="button" class="size" value="25px" data="25" /></li>
<li><input type="button" class="size" value="30px" data="30" /></li>
</ul>
</li>
<li>
背景颜色
<ul class="btnBox BGColorWrap">
<li><input type="button" class="BGcolor" value="红" data="red" /></li>
<li><input type="button" class="BGcolor" value="黄" data="yellow" /></li>
<li><input type="button" class="BGcolor" value="绿" data="green" /></li>
<li><input type="button" class="BGcolor" value="蓝" data="blue" /></li>
</ul>
</li>
<li>
对齐
<ul class="btnBox formatWrap">
<li><input type="button" class="format" value="居中" data-type="JustifyCenter" /></li>
<li><input type="button" class="format" value="左边" data-type="JustifyLeft" /></li>
<li><input type="button" class="format" value="右边" data-type="JustifyRight" /></li>
<li><input type="button" class="format" value="无" data-type="JustifyRight" disabled="disabled" /></li>
</ul>
</li>
<li><input type="button" class="Fbtn" value="斜体" data-type="Italic" /></li>
<li><input type="button" class="Fbtn" value="粗体" data-type="Bold" /></li>
<li><input type="button" class="Fbtn" value="下划线" data-type="Underline" /></li>
</ul>
<div class="edit_wrap" contenteditable="true">
本站的url地址是<a href="http://www.pipipi.net" target="_blank">www.pipipi.net</a>
</div>
</div>
</body>
</html>
js简单富文本编辑器效果代码实例，这样的场景在实际项目中还是用的比较多的，关于js简单富文本编辑器效果代码实例就介绍到这了。
js简单富文本编辑器效果代码实例属于前端实例代码，有关更多实例代码大家可以查看。