JS метод Document.execCommand()

Загальний опис

Метод execCommand() в об'єкті Document є потужним інструментом у веб-розробці, призначеним для виконання команд редагування на веб-сторінці. Основна суть цього методу полягає у виконанні зазначених команд для редагування текстового вмісту в елементах, які можуть бути редаговані користувачем, таких як <textarea>, <input type="text"> або елементи з атрибутом contenteditable.

Вставка тексту:

Одним з простих застосувань execCommand() є вставка тексту у вибраний елемент. Наприклад, щоб вставити текст у <textarea> з id "myTextarea", можна використати наступний код:

document.getElementById("myTextarea").execCommand("insertText", false, "Вставлений текст");

Цей код вставляє текст "Вставлений текст" у вказаний елемент <textarea>.

Вирізання, копіювання та вставка:

execCommand() також дозволяє виконувати операції вирізання, копіювання та вставки тексту. Наприклад:

document.execCommand("cut"); // Вирізати виділений текст
document.execCommand("copy"); // Скопіювати виділений текст
document.execCommand("paste"); // Вставити текст з буфера обміну

Ці команди працюють з текстом, який був виділений користувачем.

Форматування тексту:

За допомогою execCommand() можна також застосовувати різноманітні форматування до тексту, наприклад, жирний, курсив, підкреслення тощо. Наприклад:

document.execCommand("bold"); // Застосувати жирний стиль до виділеного тексту
document.execCommand("italic"); // Застосувати курсив до виділеного тексту
document.execCommand("underline"); // Підкреслити виділений текст

Ці команди дозволяють швидко та легко змінити стиль виділеного тексту.

Застосування у реальних проектах

Метод execCommand() широко використовується в онлайн-редакторах тексту, блог-платформах та веб-додатках, де потрібно надавати користувачам можливість редагування текстового вмісту. Наприклад, у текстових редакторах можна знайти кнопки для форматування тексту, які використовують execCommand() для застосування стилів. Також, цей метод може бути корисним у веб-додатках, де потрібно динамічно змінювати вміст полів вводу або обробляти текстовий вміст, введений користувачем.

Синтаксис

execCommand(aCommandName, aShowDefaultUI, aValueArgument)

Параметри

*aCommandName

Рядок, що вказує назву команди для виконання.

*aShowDefaultUI

Логічне значення, що вказує, чи слід відображати типовий користувацький інтерфейс. Це не реалізовано в Mozilla.

*aValueArgument

Для команд, які вимагають вхідний аргумент, це рядок, що надає необхідну інформацію. Наприклад, для команди insertImage потрібна URL-адреса зображення для вставки. Вкажіть null, якщо аргумент не потрібний.

Return

boolean

Повертає логічне значення, яке є false, якщо команда не підтримується або вимкнена. Зверніть увагу: document.execCommand() повертає true лише у випадку, якщо виклик здійснюється у рамках взаємодії з користувачем. Ви не можете використовувати його для перевірки підтримки браузера перед викликом команди.

Переглядачі

• Стаціонарні переглядачі
• Мобільні переглядачі
• Серверні переглядачі

Приклади

• Приклад 1
• Приклад 2

<header>
  <h2 class="title">execCommand() метод</h2>
  <p class="description">Використовується для виконання команди над вмістом редагованого документа.</p>
</header>
<main>
  <div class="result">
    <button onclick="insertText()">Вставити текст</button>
    <div id="editor" contenteditable="true" style="border: 1px solid #ccc; padding: 10px;">Редагований текст</div>
  </div>
</main>

<script>
  function insertText() {
    // Отримуємо елемент редактора
    var editor = document.getElementById('editor');
    // Виконуємо команду вставки тексту
    document.execCommand('insertText', false, 'Вставлений текст');
  }
</script>

<header>
  <h2 class="title">execCommand() метод</h2>
  <p class="description">Використовується для виконання команди над вмістом редагованого документа.</p>
</header>
<main>
  <div class="result">
    <button onclick="insertHTML()">Вставити HTML</button>
    <button onclick="changeFormat()">Змінити формат тексту</button>
    <div id="editor" contenteditable="true" style="border: 1px solid #ccc; padding: 10px;">Редагований текст</div>
  </div>
</main>

<script>
  function insertHTML() {
    // Отримуємо елемент редактора
    var editor = document.getElementById('editor');
    // Виконуємо команду вставки HTML
    document.execCommand('insertHTML', false, '<strong>Вставлений HTML</strong>');
  }

  function changeFormat() {
    // Отримуємо елемент редактора
    var editor = document.getElementById('editor');
    // Виконуємо команду зміни формату тексту
    document.execCommand('formatBlock', false, '<h1>');
  }
</script>