Атрибут приймає три можливих значення: true, false і inherit. True означає, що елемент можна редагувати. Пусте значення також розцінюється, як true. False говорить про те, що елемент не можна редагувати. За замовчуванням встановлено значення inherit, яке означає, що елемент можна відредагувати в тому випадку, якщо його найближчий батьківський контейнер також можна відредагувати. Це означає, що якщо зробити елемент редагується, то і все його дочірні елементи, в тому числі і не найближчі, будуть також редагованими. Виняток становлять дочірні елементи, у яких задано contentEditable = false.
Сучасні тенденції і підходи в веб-розробці
Дізнайтеся алгоритм швидкого професійного зростання з нуля в сайтобудування
Спочатку необхідно створити кнопку перемикання в режим редагування і сам текст.
Всі елементи, які будуть редагуватися, повинні мати свій унікальний id. Ідентифікатори допоможуть нам при збереженні змін, або коли нам потрібно зберегти текст для подальшої його заміни в кожному елементі. Код JS нижче редагує і зберігає зміни.
Для зберігання відредагованого тексту в змінній можна скористатися querySelectorAll (). Даний метод повертає NodeList, в якому зберігаються всі елементи документа, задані за певним селектору. За допомогою даного методу набагато легше відстежувати редаговані елементи в однієї змінної. Наприклад, отримати доступ до заголовку документа можна за допомогою editables [0], що ми зараз і зробимо.
Тепер необхідно прив'язати до події кліка по кнопці обробник. Під час кожного кліка по кнопці користувачем ми перевіряємо заголовок на режим редагування. Якщо заголовок не можна редагувати, всім редагованим елементам ми задаємо властивість contentEditable в true. А текст кнопки 'Edit Document' міняємо на 'Save Changes'. Після того, як користувач вніс необхідні зміни, він клікає на кнопку 'Save Changes', що призводить до моментального збереженню змін.
Якщо заголовок редагується, всіх елементів задається властивість contentEditable в false. На даному етапі ми може зберігати контент документа на сервері, щоб скористатися ним пізніше, а можемо синхронізувати зміни з копією документа. У цьому уроці я все буду зберігати в localStorage. Щоб випадково не перезаписати дані при збереженні в localStorage, я використовую id кожного елемента. CodePen демо
Отримання збереженого контенту
Якщо ви в демо вище внесете будь-які зміни і перезавантажте сторінку, то всі зміни пропадуть. Це відбувається тому, що не прописаний код, який би відновлював збережені дані. Після збереження даних в localStorage нам необхідно їх відновити, коли користувач знову відкриє сторінку.
Сучасні тенденції і підходи в веб-розробці
Дізнайтеся алгоритм швидкого професійного зростання з нуля в сайтобудування
Друга зміна - автосохранение даних. Зробити це можна по-різному. Можна зберігати дані кожні 5 секунд.
Можна зберігати дані по кожній події keydown.
У цій статті я використовував перший метод. Ви можете зберігати дані по будь-якої події, яка вважаєте за потрібне. CodePen демо
Редагування всієї сторінки за допомогою властивості Design Mode
contentEditable корисний, коли потрібно змінити кілька елементів на веб-сторінці. Якщо ж вам потрібно змінити все або майже все елементи на сторінці, то тут вам допоможе властивість designMode. Дана властивість застосовується до всього документу. Для включення і відключення використовуються відповідно document.designMode = 'on'; і document.designMode = 'off' ;.
Дана властивість довело свою корисність в ситуаціях, коли ви дизайнер і працюєте з контент-менеджером. Ви створюєте дизайн сторінки і заповнюєте її пробним текстом, а контент-менеджери замінюють цей текст на нормальний. Щоб подивитися designMode в дії, відкрийте консоль в панелі розробника браузера, введіть document.designMode = 'on'; і натисніть Enter. Тепер все на сторінці можна редагувати.
заключні думки
Редакція: Команда webformyself.
Сучасні тенденції і підходи в веб-розробці
Дізнайтеся алгоритм швидкого професійного зростання з нуля в сайтобудування
Найсвіжіші новини IT і веб-розробки на нашому Telegram-каналі