Пишем свой текстовый редактор на JavaScript
Привет, бро) Сегодня будет очень много практики. Но всё же надо начать с теории. Мы не будем использовать никаких фреймворков и библиотек, за исключением FontAwesome.
document.execCommand
Данный API позволяет редактировать текст, а именно менять начертание/толщину, менять формат, удалять формат и др.
Первый аргумент функции - что за команда, второй - использовать дефолтное UI, третий - аргумент ( не всегда). Иногда при втором аргументе, когда он выставлен на true, текст может не меняться, так что советую сразу ставить на false.
document.execCommand("formatBlock", false, "<h4>")
contenteditable=true
В HTML у каждого тега есть такой аттрибут. По умолчанию он стоит конечно же на false, иначе мы могли бы редактировать всё подряд. Уже ясно из второго предложения, что данный аттрибут отвечает за возможность внесения изменений в HTML код. Желательно ставить на тег-контейнер <div>, а не на что-либо другое.
<div contenteditable="true"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur quaerat, natus nobis cum ut rerum obcaecati reiciendis beatae sapiente vel. </div>
По сути, в Telegraph я тоже пишу в div с contenteditable=true.
Подготовка проекта
Чтоб не морочиться с иконками, будем юзать FontAwesome. Для этого в голову кидаем нужную нам ссылку, и не забываем импортировать наш style.css и app.js:
<head> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> <script src="app.js" charset="utf-8"></script> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css"> <title></title> </head>
HTML
Редактор будет состоять из двух элементов - поле ввода, и панель инструментов. Внутри панели будут лежать кнопки с функцией cmd(), где у каждой кнопки особый параметр. Также внутри кнопок находятся соответствующие иконки.
<nav>
<button id="b" onclick="cmd('bold')"><i class="fas fa-bold"></i></button>
<button id="i" onclick="cmd('italic')"><i class="fas fa-italic"></i></button>
<button id="T" onclick="cmd('heading','H1')"><i class="fas fa-heading"></i></button>
<button id="t" onclick="cmd('heading', 'H2')"><i style="transform: scale(0.8)" class="fas fa-heading"></i></button>
<button onclick="cmd('undo')"><i class="fas fa-undo-alt"></i></button>
<button onclick="cmd('formatBlock', '<p>')"><i class="fas fa-eraser"></i></button>
</nav>
<div contenteditable="true">
<h1>Lorem ipsum dolor sit amet</h1><p>consectetur adipisicing elit. Debitis mollitia incidunt</p>
</div>
CSS
Здесь будет очень много кода, чтобы наш редактор выглядел бы более менее.
Div
Чтобы наш текст красиво, мы зададим ему адаптивную ширину и шрифт.
div {
height: 10em;
width: 700px;
padding: 20px;
outline: none;
font-family: Georgia;
margin: 0 auto;
font-size: 27px;
}
Body
Тут мы делаем так, чтобы все блоки не уезжали вправо и не растягивались.
body {
margin: 0;
width: 100%
}
Nav
Это наша панель инструментов. Главное чтобы был position: sticky, остальное на своё усмотрение.
nav {
text-align: center;
border-bottom: 2px solid black;
top: 0; position: sticky;
width: 100%;
background: white
}
Button
Нарисуем красивые кнопки с нормальной дистанцией относительно друг друга.
button {
display: inline-block;
font-size: 26px;
border-style: none;
padding: 6px;
margin: 0 10px;
background-color: white;
cursor: pointer;
}
button:hover {
color: darkslategrey
}
H1, H2
Чтобы текст был почитабельнее, сделаем разные шрифты у заголовка и основного текста.
h1, h2 {
font-family: arial;
}
h1 {
font-size: 42px
}
h2 {
font-size: 35px;
}
JavaScript
Как ни странно, нужна всего лишь одна функция. API делает всё за вас.
cmd = (cmd, arg) => {
document.execCommand(cmd, false, arg)
}
Всё, наш редактор готов!
Заключение
Как оказалось, JavaScript здесь почти не нужен, точнее не нужно писать тонну кода, чтобы сделать редактор. В будущем я проведу опрос на вторую часть, где мы будем сохранять файлы в MarkDown.