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Значення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
1 |
1 |
1.2 |
9 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
4.4 |
18 |
4 |
1 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
У цьому прикладі, кнопка "Перемкнути режим редагування" дозволяє користувачу активувати або деактивувати можливість редагування тексту в div-елементі з id="editableContent". Це демонструє, як можна використовувати Document.designMode для створення інтерактивних веб-сторінок, де користувачі мають можливість безпосередньо взаємодіяти з контентом.
У цьому прикладі ми демонструємо, як можна автоматично включити режим редагування для всього документа відразу після його завантаження. Такий підхід може бути корисним у ситуаціях, коли потрібно надати користувачам можливість відразу редагувати контент на сторінці, наприклад, у системах управління контентом (CMS) або при розробці веб-додатків для освітніх цілей.
document.addEventListener('DOMContentLoaded', function() {
// Включення режиму редагування для документа як тільки він завантажується
document.designMode = "on";
});У цьому складнішому прикладі ми не лише вмикатимемо або вимикатимемо режим редагування, але й змінюватимемо візуальний стан сторінки, щоб користувач міг легко ідентифікувати, коли документ перебуває у режимі редагування. Це демонструє гнучкість Document.designMode для розробки інтерактивних та користувацьких веб-додатків.
// Визначення функції для перемикання режиму редагування
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);