JS властивість Document.designMode

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

Властивість designMode об'єкта Document відкриває перед розробниками JavaScript унікальні можливості для керування редагованістю вмісту веб-сторінки. Коли ця властивість встановлена в значення on, весь документ переходить у режим редагування, дозволяючи користувачам змінювати текст безпосередньо на сторінці, ніби працюючи у текстовому редакторі. Ця функціональність особливо корисна для створення інтерактивних веб-додатків, таких як CMS (системи управління контентом), електронні листи, блоги та інші платформи, де необхідно надати користувачу можливість змінювати вміст.

Для активації режиму редагування в документі достатньо встановити властивість designMode в on:

document.designMode = "on";

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

Розширені можливості

Щоб керувати режимом редагування більш деталізовано, можна комбінувати designMode з іншими методами та властивостями ДОМ. Наприклад, для зміни форматування вибраного тексту, можна використовувати метод execCommand:

document.designMode = "on";
document.execCommand('bold', false, null); // Зробити вибраний текст жирним

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

Приклад складнішого застосування

В контексті розробки більш складних веб-додатків, designMode може бути використаний разом з іншими технологіями, наприклад, для створення власного текстового редактора з повним набором інструментів для редагування. Розробник може створити інтерфейс з кнопками для форматування тексту (наприклад, жирний, курсив, підкреслений) та іншими опціями редагування, кожна з яких буде викликати відповідний execCommand:

function toggleBold() {
    document.execCommand('bold', false, null);
}

// Припустимо, що у HTML є кнопка з ідентифікатором 'boldButton'
document.getElementById('boldButton').addEventListener('click', toggleBold);

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

правити

Порада

Пам'ятайте, що після виключення режиму дизайну за допомогою встановлення document.designMode у off, всі зміни, внесені користувачем, не будуть збережені після оновлення сторінки. Тому, якщо потрібно зберегти зміни, розгляньте можливість використання скриптів для збереження даних на сервері або в локальному сховищі.

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

Порада

Хоча document.designMode є потужним інструментом для редагування вмісту сторінки, важливо застосовувати його з обережністю, щоб уникнути несанкціонованого редагування з боку користувачів. Використовуйте його переважно в розробницьких або тестових середовищах, а не на виробничих веб-сайтах.

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

Порада

Для більшої гнучкості можна комбінувати використання document.designMode з CSS та JavaScript для створення інтерактивних інструментів редагування, які дозволяють користувачам змінювати визначені частини веб-сторінки. Це може включати додавання кнопок для активації режиму редагування або використання JavaScript для збереження змін, внесених у режимі дизайну.

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

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

Синтаксис

Document.designMode

Переглядачі

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

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

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

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

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

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

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

Приклади

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

<button id="toggleDesignMode">Перемкнути</button>

// Визначення функції для перемикання режиму редагування
function toggleDesignMode() {
  if (document.designMode === "off") {
    document.designMode = "on";
    document.body.classList.add("edit-mode");
  } else {
    document.designMode = "off";
    document.body.classList.remove("edit-mode");
  }
}

// Додавання обробника події до кнопки для перемикання режиму
document.getElementById('toggleDesignMode').addEventListener('click', toggleDesignMode);

document.addEventListener('DOMContentLoaded', function() {
  // Включення режиму редагування для документа як тільки він завантажується
  document.designMode = "on";
});