Как создать текстовый редактор с помощью Javascript и HTML?
Введение в проект: в этой статье мы узнаем, как создать простое приложение JavaScript для текстового редактора, в котором мы можем манипулировать пользовательским вводом в различных стилях, редактировать ввод, использовать заглавные буквы и т. д., многие строковые операции. Посмотрим на реализацию.
Подход:
• Создайте кнопки для выполнения операций над текстом в div.
• Создайте текстовое поле в div, используя тег textarea .
• Выберите элементы, используя метод document.querySelector.
• Затем измените CSS с помощью JavaScript.
index.html
<html lang="ru" dir="ltr">
<head>
<meta charset="utf-8">
<title>текстовый редактор</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 для иконок -->
<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" />
<!-- CSS стили -->
<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>
</head>
<!-- Body начало -->
<body>
<section class="">
<h1 class="shadow-sm">Текстовый редактор</h1>
<div class="flex-box">
<div class="row">
<div class="col">
<!-- Добавление разных кнопок для разных функций -->
<!-- Добавлен атрибут onclick, чтобы кнопка работала при нажатии. -->
<button type="button" onclick="f1()" class=" shadow-sm btn btn-outline-secondary" data-toggle="tooltip" data-placement="top" title="Жирный текст">Жирный</button>
<button type="button" onclick="f2()" class="shadow-sm btn btn-outline-success" data-toggle="tooltip" data-placement="top" title="Курсивный текст">Курсив</button>
<button type="button" onclick="f3()" class=" shadow-sm btn btn-outline-primary" data-toggle="tooltip" data-placement="top" title="Выровнять по левому краю"><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="Выровнять по центру"><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="Выровнять по правому краю"><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="Текст в верхнем регистре">Текст в верхнем регистре</button>
<button type="button" onclick="f7()" class="btn shadow-sm btn-outline-primary" data-toggle="tooltip" data-placement="top" title="Текст в нижнем регистре">Текст в нижнем регистре</button>
<button type="button" onclick="f8()" class="btn shadow-sm btn-outline-primary" data-toggle="tooltip" data-placement="top" title="Сделать текст заглавным">Сделать текст заглавным</button>
<button type="button" onclick="f9()" class="btn shadow-sm btn-outline-primary side" data-toggle="tooltip" data-placement="top" title="Подсказка вверху">Подсказка вверху</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="Здесь ваш текст "></textarea>
</div>
</div>
<div class="col-md-3">
</div>
</div>
</section>
<br>
<h6 style="text-align:center;">mirjs.uz - программируйте друзья.</h6>
<!-- Внешний файл JavaScript -->
<script src="home.js"></script>
</body>
</html>
Объяснение кода HTML: Здесь мы добавили в документ различные кнопки, которые получат возможность выполнять некоторые задачи, которые мы даем ему с помощью JavaScript. Мы добавили кнопки для изменения шрифта входной строки, стиля шрифта, выравнивания текста строки и собираемся преобразовать строку с помощью объектной модели документа. Мы добавили некоторые основные CSS, чтобы украсить документ, вы можете использовать различные свойства CSS, чтобы он выглядел лучше. А в приведенной ниже части HTML-кода мы добавили одно текстовое поле, в котором пользователь может записать входную строку. Итак, мы готовы со всем дизайном и структурой нашего проекта, теперь все, что нам нужно сделать, это дать ему полномочия с помощью JavaScript. Теперь у нас есть текстовое поле и несколько кнопок для применения разных стилей ввода строки.
home.js
// функция, чтобы сделать текст жирным, используя метод DOM
document.querySelector("#textarea1").style.fontWeight = "bold";
}
function f2() {
// функция, чтобы сделать текст курсивом, используя метод DOM
document.querySelector("#textarea1").style.fontStyle = "italic";
}
function f3() {
// функция для выравнивания текста по левому краю с использованием метода DOM
document.querySelector("#textarea1").style.textAlign = "left";
}
function f4() {
// функция для выравнивания текста по центру с использованием метода DOM
document.querySelector("#textarea1").style.textAlign = "center";
}
function f5() {
// функция для выравнивания текста с право с использованием метода DOM
document.querySelector("#textarea1").style.textAlign = "right";
}
function f6() {
// функция для преобразования текста в верхний регистр с использованием метода DOM
document.querySelector("#textarea1").style.textTransform = "uppercase";
}
function f7() {
// функция для преобразования текста в нижний регистр с использованием метода DOM
document.querySelector("#textarea1").style.textTransform = "lowercase";
}
function f8() {
// функция, чтобы сделать текст заглавным, используя метод DOM
document.querySelector("#textarea1").style.textTransform = "capitalize";
}
function f9() {
// функция, чтобы вернуть текст в нормальное состояние, удалив все примененные методы
// используя метод DOM
document.querySelector("#textarea1").style.fontWeight = "normal";
document.querySelector("#textarea1").style.textAlign = "left";
document.querySelector("#textarea1").style.fontStyle = "normal";
document.querySelector("#textarea1").style.textTransform = "capitalize";
document.querySelector("#textarea1").value = " ";
}
Объяснение кода JavaScript:
здесь мы выбираем элементы с помощью DOM. Затем мы используем метод document.querySelector для выбора определенного элемента, а затем, после выбора определенного элемента с использованием его идентификатора, мы манипулируем его CSS через JavaScript. Наконец, мы создали функцию, которая возвращает все в нормальное состояние, где отменяются все свойства, примененные с помощью предоставленных нами кнопок.
Есть много других функций, которые вы можете добавить в этот проект, например, изменение размера шрифта, подсчет количества букв, слов внутри текстовой области, изменение стиля шрифта и многое другое. Попробуйте.
