HTML5 Contenteditable Атрибут Редагування веб-контенту на передній панелі

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

Що він робить

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

 
Печиво кекс круасани. Фаворки датського печива. Jujubes порошок печива торт печиво халва халва. Печиво гумми желе печиво.
 
Солодкий рол тірамісу шоколадний батончик цукрової карамелі сливової тооці рулонної карамелі. Шоколадний торт, випас, цукрова вата. Застосовують кунжутне затискання лакричного тіста, круасани, карамелі, кекс, пряник печиво. Пончик Ірис цукерки тростини.
 
 

У цьому прикладі ми додали Зміствідповідних атрибут і встановити його вірно тому вміст стає доступним для редагування. Для цього атрибуту можна додати ще два значення;

• помилковий що робить навпаки: вміст не можна редагувати
• успадковувати; вона перетворить вміст, що можна редагувати, коли прямий батько можна редагувати.

• Переглянути демонстрацію

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

Як зберегти зміни

Збереження змін залежить від того, де ми зберігатимемо дані; зазвичай вона буде збережена в базі даних. Але оскільки ми не маємо доступу до бази даних, у цьому підручнику ми покажемо, як зберегти зміни localStorage. Для цього ми також використаємо трохи jQuery для спрощення коду. Я рекомендую вам звернути увагу на минуле, сьогодення та майбутнє локальних сховищ для веб-додатків як додаткову довідку.

Перш за все, додамо a кнопки поруч із нашим вмістом.

 
 
Солодкий рол тірамісу шоколадний батончик цукрової карамелі сливової тооці рулонної карамелі. Шоколадний торт, випас, цукрова вата. Застосовують кунжутне затискання лакричного тіста, круасани, карамелі, кекс, пряник печиво. Пончик Ірис цукерки тростини.
 
 Зберегти зміни 

Ідея полягає в тому, що ми будемо зберігати зміни після натискання кнопки. Отже, давайте встановимо цю подію через скрипт;

 var theContent = $ ('# content2'); $ ('# save'). on ('click', function () var editedContent = theContent.html (); localStorage.newContent = editedContent;); 

Цей код створить новий ключ в localStorage, що містить останні зміни, внесені в вміст. Ми можемо використовувати Firebug або Інструменти розробника, щоб з'ясувати, чи були дані успішно збережені чи ні, але переконайтеся, що ви натиснули кнопку. Для користувачів Firefox перейдіть до розділу DOM панель і пошук локального сховища. У Chrome, а також у Safari ми бачимо його на вкладці "Ресурси".

Потім ми можемо отримати ці дані для оновлення вмісту, як зазначено нижче.

 if (localStorage.getItem ('newContent')) theContent.html (localStorage.getItem ('newContent'));  

Код вище буде ідентифікувати елемент newContent з локального сховища, і якщо він існує, він передасть значення вибраному елементу, в даному випадку # content2. На цьому етапі, коли ми оновлюємо сторінку, ми все одно повинні бачити зміни, які ми зробили.

• Переглянути демонстрацію
• Завантажити джерело

Заключна думка

У минулі часи додавання функції переднього кінця редактора, як ми вже показали, може зайняти кілька годин або навіть тижнів. Сьогодні цей атрибут займає лише секунду, Зміствідповідних.

І, згідно з caniuse.com, цей атрибут вже підтримується (на диво) в IE7 + і (як не дивно) в інших браузерах: Firefox 12, Chrome 20, Safari 5.1 і Opera 12. Це означає, що ми можемо використовувати цей елемент з миром розуму без необхідності налаштування падіння старих браузерів.