Всем привет и сегодня мы рассмотрим замечательный метод execCommand() который предназначен для редактирования текста.
Давайте рассмотрим этот метод подробнее:
document.execCommand('Название команды', false, значение (если требуется));
как видите здесь у нас передается три параметра: название команды, пользовательский интерфейс по умолчанию и значение. Пользовательский интерфейс обычно выставляется false, если значение не требуется указывать, то ставится просто null.
Приступим к делу создадим текстовую область в div используя атрибут contenteditable
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Работа с текстом в поле</title>
</head>
<body>
<style>
.textarea{
border:1px solid #00f;
height:400px;
box-sizing:border-box;
padding:30px;
}
</style>
<div class="textarea" contenteditable="true" >Пишем наш текст!</div>
</body>
</html>Как видите мы создали редактируемую текстовую область к которой мы будем поочередно применять команды метода execCommand() и так поехали.
Первая команда которую мы рассмотрим:
copy - копирование выделения в буфер обмена.
Рассмотрим на примере кнопки
<button onclick="document.execCommand('copy', false, ''); " >
Копировать в буфер
</button>После нажатия этой кнопки выделенные области текста будут скопированы в буфер и их можно будет извлечь комбинацией клавиш ctrl + v.
<button onclick="document.execCommand('cut', false, ''); " >
Вырезать
</button>Как вы наверное догадались данная команда вырезает выделенный текст.
Также мы можем и удалять текст.
<button onclick="document.execCommand('delete', false, ''); " >
Удалить
</button>Делать текст полужирным
<button onclick="document.execCommand('bold', false, ''); " >
Жирный
</button>и курсивным
<button onclick="document.execCommand('italic', false, ''); " >
Курсивный
</button>Причем если вы заметили , то нажимая на кнопку повторно у нас стили текста возвращаются в прежнее состояние и это здорово чем то напоминает текстовый редактор wordOffice . При этом если мы скопируем наш текст в word все наши изменения (которые мы внесли в текст с помощью метода execCommand() без проблем будут отображаться в текстовом редакторе. Для примера давайте рассмотрим следующие команды:
<button onclick="document.execCommand('justifyLeft', false, ''); " ><!--Выравание слева-->
Слева
</button>
<button onclick="document.execCommand('justifyRight', false, ''); " ><!--Выравание справа-->
Справа
</button>
<button onclick="document.execCommand('justifyCenter', false, ''); " ><!--Выравание по центру-->
По центру
</button>
<button onclick="document.execCommand('justifyFull', false, ''); " ><!--Выравание по всей ширине-->
По ширине
</button>
<label>Цвет текста:</label>
<input type="color" onchange="document.execCommand ('foreColor', false, this.value);"/><!--Цвет текста-->
<label>Заливка:</label>
<input type="color" onchange="document.execCommand ('backColor', false, this.value);"/><!--Цвет фона-->
<select onchange="document.execCommand ('fontName', false, this.value);"><!--Выбор шрифта-->
<option value="Times New Roman">Times New Roman</option>
<option value="Arial">Arial</option>
<option value="Tahoma">Tahoma</option>
</select>
<select onchange="document.execCommand ('fontSize', false, this.value);"><!--Выбор размера от 1-7-->
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
<button onclick="document.execCommand('underline', false, ''); " ><!--Подчеркивание текста-->
<u>текст</u>
</button>
<button onclick="document.execCommand('strikeThrough', false, ''); " ><!--Зачеркивание текста-->
<s>текст</s>
</button>
<button onclick="document.execCommand('superscript', false, ''); " ><!--Верхний индекс-->
X<sup>n</sup>
</button>
<button onclick="document.execCommand('subscript', false, ''); " ><!--Нижний индекс-->
X<sub>n</sub>
</button>Как видите с помощью метода execCommand можно вполне написать свой собственный текстовый редактор при этом весь отформатированный текст с помощью этого метода отлично читается wordOffice.
Отмечу что это далеко не все команды данного метода, есть еще и более экзотические, я же вам показал основные. Но общую суть я думаю вы уловили! На этом данная статья подошла к концу, очень надеюсь что она для вас была содержательна! Удачи в веб разработке!
