Каковы его функции
Когда этот атрибут применяется к элементу, он позволяет нам редактировать контент в этом элементе. Давайте рассмотрим пример, приведенный ниже:
<article id="content1" contenteditable="true">
<p>Cookie muffin croissant. Faworki danish biscuit. Jujubes powder cookie cake
biscuit halvah halvah. Biscuit gummies jelly biscuit.</p>
<p>Sweet roll tiramisu chocolate bar sugar plum caramels tootsie roll caramels.
Chocolate cake wypas cotton candy icing. Applicake sesame snaps liquorice pastry croissant
caramels fruitcake gingerbread biscuit. Donut toffee candy canes.</p>
</article>
В данном примере мы добавили атрибут Contenteditable и выставили значение «true», и теперь контент можно редактировать. Есть также 2 других значения, которые можно использовать с этим атрибутом:
False – позволяет исключить возможность редактирования контента
Inherit – позволяет сделать контент редактируемым, если родительский элемент также позволяет редактирование
* Посмотреть демо
Если вы ознакомились с демо, приведенным выше, вы могли видеть, что контент можно редактировать прямо при помощи окна браузера. Тем не менее, следует отметить, что элементы не сохраняют измененные значения, а значит, после перезагрузки страницы все вернется на свои места.
Как мы можем сохранить значения
Сохранение значений зависит от того, где будут размещаться данные. Обычно они сохраняются в базе данных. Но так как у нас нет доступа к базе данных, в данном руководстве, мы хотим показать вам, как можно сохранить данные в localStorage. Для этого мы также воспользуемся jQuery, и упростим код. Мы рекомендуем вам также ознакомиться со статьей под названием «The Past, Present & Future of Local Storage for Web Applications».
Прежде всего, давайте добавим кнопку рядом с нашим контентом.
<article id="content2" contenteditable="true">
<p>Sweet roll tiramisu chocolate bar sugar plum caramels tootsie roll caramels. Chocolate cake wypas cotton candy icing. Applicake sesame snaps liquorice pastry croissant caramels fruitcake gingerbread biscuit. Donut toffee candy canes.</p>
</article>
<button id="save">Save Changes</button>
Здесь суть заключается в том, что мы будем сохранять изменения при нажатии кнопки. Поэтому, давайте проведем это событие при помощи скрипта:
var theContent = $('#content2');
$('#save').on('click', function(){
var editedContent = theContent.html();
localStorage.newContent = editedContent;
});
Данный код создаст новый ключ в localStorage, который будет содержать последние внесенные изменения. Вы можем использовать Firebug или Developer Tools, чтобы уточнить, была ли информация сохранена успешно или нет, только не забудьте нажать на кнопку. Для пользователей Firefox: нужно пройти в панель DOM, и найти там localStorage. В Chrome и в Safari мы можем найти это во вкладке Resources (Ресурсы).
Затем мы можем запросить эти данные для того, чтобы обновить контент, следующим образом:
if(localStorage.getItem('newContent')) {
theContent.html(localStorage.getItem('newContent'));
}
Вышеприведенный код идентифицирует пункт newContent в localStorage и, если он присутствует, проведет значение в выбранный элемент, в данном случае в #content2. На данном этапе, когда мы обновляем страницу, внесенные изменения сохраняются.
Посмотреть демо | Скачать исходный код
Внимание! У вас нет прав для просмотра скрытого текста.
В завершение
Раньше реализация такого функционала заняла бы десятки часов, а то и неделю. Сегодня же это все делается в течение получаса при помощи атрибута contenteditable.
И, судя по caniuse.com, этот атрибут уже поддерживается (что удивительно) в IE7+ и (что не удивительно) в других браузерах: Firefox 12, Chrome 20, Safari 5.1 и Opera 12. Это означает, что мы можем использовать этот элемент, не задумываясь о запасных вариантах для устаревших браузеров.