Остановите войну в Украине!

Ат­ри­бут contenteditable

Перевод «The contenteditable attribute»

Редактировать статью на Гитхабе

Джек Осборн

Перевод Антон Немцев

Редактура Вадим Макеев

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

ОсновыСкопировать ссылку

Давайте обратимся к спецификации:

Атрибут contenteditable обладает фиксированным набором значений, он может быть пустой строкой, true или false. Пустая строка или true обозначают, что элемент доступен для редактирования. false обозначает, что элемент недоступен для редактирования. Есть еще третье состояние — inherit, это значение атрибута по умолчанию и оно означает, что значение наследуется от родительского элемента.

В основном, атрибут contenteditable должен был обеспечивать работу WYSIWYG-редакторов. Скорее всего, вы встречали его в инструментах подобных Symphony или на сайтах вроде Flickr, где вы начинаете редактировать материалы, просто кликнув в определенную область.

Как упоминалось выше, contenteditable может быть в трёх возможных состояниях:

  1. contenteditable="" или contenteditable="true" означает, что элемент доступен для редактирования
  2. contenteditable="false" означает, что элемент недоступен для редактирования
  3. contenteditable="inherit" означает, что элемент доступен для редактирования в случае, если его непосредственный родитель доступен для редактирования. Это значение атрибута по умолчанию.

Когда вы добавляете элементу атрибут contenteditable, браузер делает его доступным для редактирования. Кроме того, все потомки этого элемента также становятся доступны для редактирования, если атрибут contenteditable у них явно не установлен в false.

Пример кодаСкопировать ссылку

<div id="example-one" contenteditable="true">
    <style scoped>
        #example-one {
            margin: 12px 0;
        }
        #example-one[contenteditable="true"] {
            padding: 10px;
            outline: 3px dashed #CCC;
        }
        #example-one[contenteditable="true"]:hover {
            outline: 3px dashed #2B8BAD;
        }
    </style>
    <p>Всё что находится в этом блоке, доступно для редактирования в браузерах, поддерживающих <code>HTML5</code>. Давайте, попробуйте: кликните для начала редактирования.</p>
</div>

ДемонстрацияСкопировать ссылку

Вот два простых примера, показывающие работу contenteditable:

Пример №1Скопировать ссылку

Всё, что находится в этом блоке, доступно для редактирования в браузерах, поддерживающих HTML5. Давайте, попробуйте: кликните для начала редактирования.

Редактирование текста.

Я использовал CSS для создания оформления, показывающего, что текст доступен для редактирования. Обратите внимание на ориентированное на будущее использование <style scoped>, которое описано в моей предыдущей статье.

Пример №2Скопировать ссылку

Крис Койер рассказывал на CSS-Tricks, что вы можете позволить вашим пользователям редактировать CSS в реальном времени, так как <style> элемент имеет display: none по умолчанию, но ведь значение можно изменить на block.

Попробуйте отредактировать CSS, приведенный ниже:

Редактирование таблицы стилей.

Поддержка браузерамиСкопировать ссылку

Поддержка атрибута contenteditable браузерами на удивление хороша:

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

Поддержка браузерами свойства contenteditable.

Должен отметить, что появлением и отличной поддержкой атрибута мы обязаны IE 5.5, хотя на самом деле ранний вариант contenteditable был разработан и внедрен Microsoft в июле 2000 года.

Более подробную таблицу совместимости можно увидеть тут: When Can I Use.

Сохранение измененийСкопировать ссылку

Для написания этого раздела я обратился за помощью к доктору Реми, так как он гораздо более сведущ во всём, что касается хранения данных всего на свете.

В зависимости от сложности блока ваш код может отлавливать нажатие Enter (код 13) для сохранения изменения и Esc (код 27) для их отмены.

Когда пользователь нажимает Enter (предполагаем, что редактируем однострочные данные), получаем innerHTML редактируемого блока и посылаем AJAX-запрос с изменениями на сервер.

Простой пример можно увидеть тут: Сохранение данных из элемента с сontenteditable при помощи AJAX.

ЗаключениеСкопировать ссылку

В своих статьях я неоднократно упоминал этот подход: спецификация наконец-то сделала официальным то, что внедрено в браузерах много лет назад.

Атрибут contenteditable — один из самых малоизвестных, но могу поспорить, что вы будете использовать его чаще, чем думаете.

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

Если у вас есть идеи, как использовать этот атрибут — расскажите нам об этом в комментариях.

Читать дальшеСкопировать ссылку

Ещё