document.designMode в JavaScript — редагована сторінка

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

Властивість 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

Переглядачі

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

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

Переглядач
	36	69	10.1	9	12	4

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

Переглядач
	37	36	79	10.3

Приклади

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

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

<header>
  <h2 class="title">Document.designMode</h2>
  <p class="description">Дозволяє редагувати контент на сторінці, перемикаючи весь документ у режим "редагування".</p>
</header>
<main>
  <div class="result">
    <button id="toggleEditMode">Перемкнути режим редагування</button>
    <div id="editableContent" contenteditable="false">
      Клацніть кнопку вище, щоб редагувати цей текст.
    </div>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

#editableContent {
  border: 1px solid #ccc;
  margin-top: 20px;
  padding: 10px;
  min-height: 100px;
}

document.getElementById('toggleEditMode').addEventListener('click', function () {
  var content = document.getElementById('editableContent');
  var isEditable = content.contentEditable === "true";
  content.contentEditable = isEditable ? "false" : "true";
  this.textContent = isEditable ? "Перемкнути режим редагування" : "Вийти з режиму редагування";
  content.focus();
});
//# sourceURL=pen.js

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