четверг, 19 января 2012 г.

HTML5: редактирование контента

Раньше мы использовали разные технологии для набора и редактирования html контента. Теперь все становится значительно проще вместе с атрибутом “contenteditable”. В этой статье я расскажу вам, как он работает.

Основы
Этот атрибут предназначен для того, чтобы значительно упростить жизнь при разработке сайтов с простым наполнением. Про использование WHATWG редактора можно будет временно забыть. Атрибут contenteditable предназначен для добавления возможности редактирования к любому блоку на странице. Чтобы эту возможность добавить необходимо дописать элементу атрибут в одном из трех видов:
  • contenteditable=""
  • contenteditable="true"
  • contenteditable="inherit"  (наследование)
Или, соответственно, добавить
  • contenteditable="false"
для отмены этого свойства.

При добавлении этого атрибута все дочерние элементы блока также становятся редактируемыми, кроме элементов с  contenteditable="false" .

Пример кода
  1. <div id="example" contenteditable="true">
  2. <style scoped>
  3. #example{ margin: 10px 0; }
  4. [contenteditable="true"] { padding: 15px; outline:3px dashed #CCC; }
  5. [contenteditable="true"]:hover { outline: 3px dashed#0090D2; }
  6. </style>
  7. <p>Все, что находится в этом диве, можно редактировать в браузерах,которые поддерживают <code>HTML5</code></p>
  8. </div>

Живой пример
Все, что находится в этом диве можно редактировать в браузерах, которые поддерживают HTML5

Поддержка браузерами

Браузер
Версия
Chrome4.0+
Safari3.1+
Mobile Safari5.0+
Firefox3.5+
Opera9.0+
Opera Mini/MobileN/A
Internet Explorer5.5+
Android3.0+


Да, я тоже очень удивился, когда увидел в таблице IE 5.5+, но в его спецификации именно это и указано. На днях протестирую и выложу результат.

Моменты использования
Применение изменений происходит по нажатию Enter (код клавиши 13), а отмена изменений по клавише escape (код клавиши 27). Так же можно навешать на эти клавиши отправку текста по ajax.

Выводы
Атрибуте contenteditable однозначно имеет будущее. Сейчас это довольно простой интрумент, который позволяет всего лишь менять без особого форматирования текстово-графический контент, но стоит разработчикам вплотную занятся его усовершенствованием и мы навсегда забудем про редактирование текстов в администраторских панелях и неудобных WHATWG редакторах. На данный момент вижу активное использование этого атрибута при редактировании таблиц, быстрой правке своих комментариев, постов и других приятные мелочей.