Блог веб разработки статьи | видеообзоры | исходный код

Блог веб разработки статьи | видеообзоры | исходный код

webfanat вконтакте webfanat youtube

JS execCommand

 JS execCommand

Всем привет и сегодня мы рассмотрим замечательный метод 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.

Отмечу что это далеко не все команды данного метода, есть еще и более экзотические, я же вам показал основные. Но общую суть я думаю вы уловили! На этом данная статья подошла к концу, очень надеюсь что она для вас была содержательна! Удачи в веб разработке!

Оцените статью:

Статьи

Разработки

Комментарии

В данном разделе пока нет комментариев!

Реклама

Запись экрана

Данное расширение позволяет записывать экран и выводит видео в формате webm