极客教程如何使用Javascript和HTML创建文本编辑器
项目介绍： 在本文中，我们将学习如何制作一个简单的文本编辑器Javascript应用程序，我们可以以不同的风格操作用户输入，编辑输入，大写等等许多字符串操作。让我们来看看实现方法。
方法：
- 在div中创建 按钮 以执行对文本的操作。
- 使用 textarea标签 在div中创建textarea。
- 使用 document.getElementById方法 选择元素。
- 然后使用JavaScript更改CSS。
index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Text Editor</title>
<!--Bootstrap Cdn -->
<link rel="stylesheet"
href=
"https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
integrity=
"sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
crossorigin="anonymous">
<!-- fontawesome cdn For Icons -->
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css"
integrity=
"sha512-PgQMlq+nqFLV4ylk1gwUOgm6CtIIXkKwaIHp/PAIWHzig/lKZSEGKEysh0TCVbHJXCLN7WetD8TFecIky75ZfQ=="
crossorigin="anonymous" />
<link rel="stylesheet"
href=
"https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
integrity=
"sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p"
crossorigin="anonymous" />
<!--Internal CSS start-->
<style>
h1 {
padding-top: 40px;
padding-bottom: 40px;
text-align: center;
color: #957dad;
font-family: 'Montserrat', sans-serif;
}
section {
padding: 5%;
padding-top: 0;
height: 100vh;
}
.side {
margin-left: 0;
}
button {
margin: 10px;
border-color: #957dad !important;
color: #888888 !important;
margin-bottom: 25px;
}
button:hover {
background-color: #fec8d8 !important;
}
textarea {
padding: 3%;
border-color: #957dad;
border-width: thick;
}
.flex-box {
display: flex;
justify-content: center;
}
</style>
<!--Internal CSS End-->
</head>
<!--Body start-->
<body>
<section class="">
<h1 class="shadow-sm">TEXT EDITOR</h1>
<div class="flex-box">
<div class="row">
<div class="col">
<!-- Adding different buttons for
different functionality-->
<!--onclick attribute is added to give
button a work to do when it is clicked-->
<button type="button"
onclick="f1()"
class=" shadow-sm btn btn-outline-secondary"
data-toggle="tooltip"
data-placement="top"
title="Bold Text">
Bold</button>
<button type="button"
onclick="f2()"
class="shadow-sm btn btn-outline-success"
data-toggle="tooltip"
data-placement="top"
title="Italic Text">
Italic</button>
<button type="button"
onclick="f3()"
class=" shadow-sm btn btn-outline-primary"
data-toggle="tooltip"
data-placement="top"
title="Left Align">
<i class="fas fa-align-left"></i></button>
<button type="button"
onclick="f4()"
class="btn shadow-sm btn-outline-secondary"
data-toggle="tooltip"
data-placement="top"
title="Center Align">
<i class="fas fa-align-center"></i></button>
<button type="button"
onclick="f5()"
class="btn shadow-sm btn-outline-primary"
data-toggle="tooltip"
data-placement="top"
title="Right Align">
<i class="fas fa-align-right"></i></button>
<button type="button"
onclick="f6()"
class="btn shadow-sm btn-outline-secondary"
data-toggle="tooltip"
data-placement="top"
title="Uppercase Text">
Upper Case</button>
<button type="button"
onclick="f7()"
class="btn shadow-sm btn-outline-primary"
data-toggle="tooltip"
data-placement="top"
title="Lowercase Text">
Lower Case</button>
<button type="button"
onclick="f8()"
class="btn shadow-sm btn-outline-primary"
data-toggle="tooltip"
data-placement="top"
title="Capitalize Text">
Capitalize</button>
<button type="button"
onclick="f9()"
class="btn shadow-sm btn-outline-primary side"
data-toggle="tooltip"
data-placement="top"
title="Tooltip on top">
Clear Text</button>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-md-3 col-sm-3">
</div>
<div class="col-md-6 col-sm-9">
<div class="flex-box">
<textarea id="textarea1"
class="input shadow"
name="name"
rows="15"
cols="100"
placeholder="Your text here ">
</textarea>
</div>
</div>
<div class="col-md-3">
</div>
</div>
</section>
<br>
<br>
<h6 style="text-align:center;">Priyansh Jha 2021.</h6>
<!--External JavaScript file-->
<script src="home.js"></script>
</body>
</html>
HTML代码解释： 在此处我们添加了不同的按钮到文档中，通过JavaScript的帮助，这些按钮将获得执行我们给它们的一些任务的能力。我们添加了用于更改输入字符串的字体粗细、字体样式、字符串的文本对齐方式，并且将使用文档对象模型来转换字符串。我们添加了一些基本的CSS来美化文档，您可以使用不同的CSS属性来使其看起来更好。在HTML代码的下部分，我们添加了一个文本字段，用户可以在其中输入字符串。所以，我们现在已经完成了项目的设计和结构，现在我们只需要使用JavaScript给它赋予能力。至于现在，我们拥有一个文本框和多个按钮，用于在输入字符串中应用不同的样式。
home.js
function f1() {
//function to make the text bold using DOM method
document.getElementById("textarea1").style.fontWeight = "bold";
}
function f2() {
//function to make the text italic using DOM method
document.getElementById("textarea1").style.fontStyle = "italic";
}
function f3() {
//function to make the text alignment left using DOM method
document.getElementById("textarea1").style.textAlign = "left";
}
function f4() {
//function to make the text alignment center using DOM method
document.getElementById("textarea1").style.textAlign = "center";
}
function f5() {
//function to make the text alignment right using DOM method
document.getElementById("textarea1").style.textAlign = "right";
}
function f6() {
//function to make the text in Uppercase using DOM method
document.getElementById("textarea1").style.textTransform = "uppercase";
}
function f7() {
//function to make the text in Lowercase using DOM method
document.getElementById("textarea1").style.textTransform = "lowercase";
}
function f8() {
//function to make the text capitalize using DOM method
document.getElementById("textarea1").style.textTransform = "capitalize";
}
function f9() {
//function to make the text back to normal by removing all the methods applied
//using DOM method
document.getElementById("textarea1").style.fontWeight = "normal";
document.getElementById("textarea1").style.textAlign = "left";
document.getElementById("textarea1").style.fontStyle = "normal";
document.getElementById("textarea1").style.textTransform = "capitalize";
document.getElementById("textarea1").value = " ";
}
JavaScript代码解释：
我们在这里使用DOM选择元素。然后我们使用 document.getElementById方法 选择特定的元素，然后通过JavaScript操作其CSS。最后，我们创建了一个函数，使一切恢复正常，通过我们提供的按钮，取消所有应用的属性。
输出：
这个项目还可以添加很多其他功能，比如更改字体大小，统计文本区域内的字母和单词数，更改字体样式等等。建议试一试。