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() має бути використаний на елементі, який має фокус. Перед викликом цього методу переконайтеся, що елемент, на якому ви хочете виконати команду, відповідає вашим очікуванням і отримав фокус.

let editor = document.getElementById('myEditor');
editor.focus(); // Надати фокус елементу
document.execCommand('bold'); // Застосувати жирний шрифт

автор: Bond правити

Порада

Для використання методу execCommand() з власними командами, які не входять до стандартного набору, використовуйте третій параметр, що передає аргументи. Це дозволяє вам розширити функціональність методу та виконувати власні дії з текстом чи редактором.

let editor = document.getElementById('myEditor');
editor.focus();
document.execCommand('insertHTML', false, '<p>Hello, world!</p>'); // Вставити HTML-код

автор: Bond правити

Порада

Обережно використовуйте метод execCommand(), оскільки деякі його команди можуть бути застарілими або не підтримуватися деякими браузерами. Рекомендується перевіряти сумісність з різними браузерами та використовувати його тільки там, де це дійсно необхідно і безпечно.

if (document.queryCommandSupported('copy')) {
    document.execCommand('copy'); // Виконати команду копіювання, якщо підтримується
}

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

execCommand(aCommandName, aShowDefaultUI, aValueArgument)

Параметри

aCommandName

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

автор: Bond

правити

aShowDefaultUI

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

автор: Bond

правити

aValueArgument

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

автор: Bond

правити

Повернення

boolean

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

автор: Bond

правити

Переглядачі

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

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1.3	9	12

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Підтримка: серверні переглядачі

Переглядач
	-	-

Приклади

+ запропонувати свій приклад у пісочниці

<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>