HTML5: атрибут contenteditable
В спецификацию HTML5 добавлено несколько структурных элементов и новых атрибутов, в том числе contenteditable, поддерживаемый большинством современных браузеров. Этот атрибут предназначен для поддержки браузерных встроенных редакторов rich-text/WYSIWYG («What You See Is What You Get»). Подобный интерфейс можно увидеть в различных блогах.
Возможности contenteditable:
Атрибут contenteditable позволяет сделать отдельные части контента редактируемыми для пользователей. Посетители страницы могут производить различные манипуляции с текстом — выделять, копировать и вставлять, перемещать текст (в том числе и с помощью мыши), изменять шрифт на полужирный или курсив, менять цвет шрифта и даже добавлять гиперссылки.
Если просто добавить атрибут contenteditablе к элементу текста, то это даст пользователям возможность применять функции редактирования, вызов которых доступен с помощью горячих клавиш (Ctrl+X — вырезать, Ctrl+V — вставить, Ctrl+В — для полужирного шрифта и Ctrl+I для курсива). Некоторые браузеры даже выдают текстовое меню при щелчке правой кнопкой мыши на элементе контента, к которому применен атрибут contenteditable. Благо"даря этому посетители страницы могут воспользоваться функциями редактирования, для которых нет горячих клавиш (например, изменить размер и цвет шрифта).
Возможно, в скором времени во всех браузерах будут реализованы дополнительные функции редактирования, такие как, например, добавление пользователем гиперссылок с помощью контекстного меню. Однако в настоящее время для создания пользовательского интерфейса редактирования, поддерживаемого всеми браузерами, необходимо использовать JavaScript.
Можно запросто добавить кнопку, позволяющую сделать шрифт выделенного фрагмента полужирным, но для того, чтобы эта кнопка правильно работала, вам придется добавить несколько скриптов. (Спецификация HTML5 содержит большое количество API, которые предназначены для упрощения работы скриптов с атрибутом contenteditablе).
Среди недостатков contenteditable следует отметить отсутствие функций, позволяющих пользователям сохранять отредактированные ими изменения. Интерфейс для подобных действий вам придется создавать самостоятельно.
- ↑ Веб-дизайн
- ← Навигация на сайте: создание удобных интерфейсов
- → HTML5: Nav-элемент и его возможности