本文介绍了一个基于HTML的文本编辑器的设计与实现细节，包括字体颜色、背景颜色、字体大小等基本编辑功能，并实现了诸如文字倒序、大小写转换、查找替换等高级功能。
QQ录屏20221127153622
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
text-decoration: none;
font-size: 16px;
box-sizing: border-box;
}
#big_frame{
margin: 0 auto;
margin-top: 50px;
height: 500px;
width: 600px;
}
textarea{
float: left;
width: 350px;
height: 500px;
border-style:double;
border-width: 3px;
border-color: black;
padding: 6px;
outline: none;
}
#btns{
float: left;
display: flex;
width: 34px;
height: 500px;
flex-direction: column;
justify-content: space-between;
padding-top: 4px;
padding-bottom: 4px;
background-color: rgb(45, 45, 45);
margin-left: 10px;
}
button{
width: 34px;
height: 34px;
border-radius: 17px;
border-width: 1px;
font-size: 5px;
}
#ability{
float: left;
display: flex;
width: 200px;
height: 500px;
background-color: rgb(156, 156, 156);
justify-content: space-between;
}
#ability div{
position: fixed;
width: 194px;
height: 300px;
padding-left: 6px;
display: none;
}
#ability label{
display:inline-block;
width: 34px;
height: 34px;
border-radius: 17px;
border-width: 1px;
cursor: pointer;
}
option,select{
font-size: 16px;
}
select{
width: 50px;
}
input{
display: inline-block;
width: 66px;
outline:none;
}
span{
border-bottom:black 1px solid;
}
</style>
</head>
<body>
<!-- 文本编辑器 -->
<div id="big_frame">
<textarea cols="48" rows="32"></textarea>
<div id="btns">
<button>字色</button>
<button>景色</button>
<button>字号</button>
<button>行高</button>
<button>首行缩进</button>
<button>倒序</button>
<button>a→A</button>
<button>A→a</button>
<button>替换</button>
<button>查找</button>
</div>
<div id="ability">
<div style="margin-top: 4px;height:115px;">
<label style="background-color:red;"></label>
<label style="background-color:orange;"></label>
<label style="background-color:yellow;"></label>
<label style="background-color:green;"></label>
<label style="background-color:lawngreen;"></label>
<label style="background-color:blue;"></label>
<label style="background-color:purple;"></label>
<label style="background-color:gray;"></label>
<label style="background-color:lightcoral;"></label>
<label style="background-color:brown;"></label>
<label style="background-color:black;"></label>
</div>
<div style="margin-top: 56px;height:115px;">
<label style="background-color:red;"></label>
<label style="background-color:orange;"></label>
<label style="background-color:yellow;"></label>
<label style="background-color:green;"></label>
<label style="background-color:lawngreen;"></label>
<label style="background-color:blue;"></label>
<label style="background-color:purple;"></label>
<label style="background-color:gray;"></label>
<label style="background-color:lightcoral;"></label>
<label style="background-color:brown;"></label>
<label style="background-color:black;"></label>
</div>
<div style="margin-top:110px;height:22px;">
<select style="outline:none;">
<option value="6">6</option>
<option value="10">10</option>
<option value="14">14</option>
<option value="16" selected="true">16</option>
<option value="18">18</option>
<option value="20">20</option>
<option value="22">22</option>
<option value="24">24</option>
</select>
</div>
<div style="margin-top:162px;height:22px;">
<select style="outline:none;">
<option value="1" selected="true">1</option>
<option value="1.5">1.5</option>
<option value="2">2</option>
<option value="2.5">2.5</option>
<option value="5">5</option>
</select>
</div>
<div style="margin-top:212px;height:22px;">
<select style="outline:none;">
<option value="2">2</option>
<option value="0" selected="true">0</option>
</select>
</div>
<div style="margin-top:416px;">
<input type="text">
<label style="width:20px;">→</label>
<input type="text">
<button style="display:inline-block;width:20px;height:20px;line-height: 20px;font-size:10px;">√</button>
</div>
<div style="margin-top:467px;">
<input type="text">
<button style="display:inline-block;width:20px;height:20px;line-height: 20px;font-size:10px;">√</button>
</div>
</div>
</div>
</body>
<script>
var btns=document.getElementById("btns")
var btn=btns.getElementsByTagName("button")
var ability=document.getElementById("ability")
var div=ability.getElementsByTagName("div")
var textarea=document.getElementsByTagName("textarea")
//设置字色
btn[0].οnmοuseοver=function(){
div[0].style.display="block"
btn[0].οnmοuseοut=function(){
div[0].style.display="none"
div[0].οnmοuseοver=function(){
div[0].style.display="block"
div[0].οnmοuseοut=function(){
div[0].style.display="none"
}
}
}
}
var label1=div[0].getElementsByTagName("label")
for(var i=0;i<11;i++){
(function(arg){
label1[arg].οnclick=function(){
textarea[0].style.color=label1[arg].style.backgroundColor
}
})(i)
}
//设置景色
btn[1].οnmοuseοver=function(){
div[1].style.display="block"
btn[1].οnmοuseοut=function(){
div[1].style.display="none"
div[1].οnmοuseοver=function(){
div[1].style.display="block"
div[1].οnmοuseοut=function(){
div[1].style.display="none"
}
}
}
}
var label2=div[1].getElementsByTagName("label")
for(var i=0;i<11;i++){
(function(arg){
label2[arg].οnclick=function(){
textarea[0].style.backgroundColor=label2[arg].style.backgroundColor
}
})(i)
}
//设置字号
btn[2].οnmοuseοver=function(){
div[2].style.display="block"
btn[2].οnmοuseοut=function(){
div[2].style.display="none"
div[2].οnmοuseοver=function(){
div[2].style.display="block"
div[2].οnmοuseοut=function(){
div[2].style.display="none"
}
}
}
}
var select=document.getElementsByTagName("select")
select[0].οnchange=function(){
textarea[0].style.fontSize=select[0].value+'px'
textarea[0].style.lineHeight=select[1].value*select[0].value+'px'
}
//设置行高
btn[3].οnmοuseοver=function(){
div[3].style.display="block"
btn[3].οnmοuseοut=function(){
div[3].style.display="none"
div[3].οnmοuseοver=function(){
div[3].style.display="block"
div[3].οnmοuseοut=function(){
div[3].style.display="none"
}
}
}
}
select[1].οnchange=function(){
textarea[0].style.lineHeight=select[1].value*select[0].value+'px'
}
//设置首行缩进
btn[4].οnmοuseοver=function(){
div[4].style.display="block"
btn[4].οnmοuseοut=function(){
div[4].style.display="none"
div[4].οnmοuseοver=function(){
div[4].style.display="block"
div[4].οnmοuseοut=function(){
div[4].style.display="none"
}
}
}
}
select[2].οnchange=function(){
textarea[0].style.textIndent=select[2].value+'em'
}
//倒序
btn[5].οnclick=function(){
var strings=textarea[0].value.split("").reverse().join("")
textarea[0].value=strings
}
//小写转大写
btn[6].οnclick=function(){
var strings=textarea[0].value.toUpperCase()
textarea[0].value=strings
}
//大写转小写
btn[7].οnclick=function(){
var strings=textarea[0].value.toLowerCase()
textarea[0].value=strings
}
//替换
var input1=div[5].getElementsByTagName("input")
var button1=div[5].getElementsByTagName("button")
btn[8].οnmοuseοver=function(){
div[5].style.display="block"
btn[8].οnmοuseοut=function(){
div[5].style.display="none"
div[5].οnmοuseοver=function(){
div[5].style.display="block"
div[5].οnmοuseοut=function(){
div[5].style.display="none"
}
}
}
}
button1[0].οnclick=function(){
while(textarea[0].value.includes(input1[0].value)){
var strings=textarea[0].value.replace(input1[0].value,input1[1].value)
textarea[0].value=strings
}
}
//查找:添加方括号
var input2=div[6].getElementsByTagName("input")
var button2=div[6].getElementsByTagName("button")
btn[9].οnmοuseοver=function(){
div[6].style.display="block"
btn[9].οnmοuseοut=function(){
div[6].style.display="none"
div[6].οnmοuseοver=function(){
div[6].style.display="block"
div[6].οnmοuseοut=function(){
div[6].style.display="none"
}
}
}
}
button2[0].οnclick=function(){
var string1="[*/*]"
while(textarea[0].value.includes(input2[0].value)){
var string2=textarea[0].value.replace(input2[0].value,string1)
textarea[0].value=string2
}
while(textarea[0].value.includes("*/*")){
var string2=textarea[0].value.replace("*/*",input2[0].value)
textarea[0].value=string2
}
}
</script>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
