—»     —»   HTML5-атрибут Contenteditable: редактирование контента во внешнем интерфейсе
  Раздел: Образование и Изучение   Комментариев: 1  

HTML5-атрибут Contenteditable: редактирование контента во внешнем интерфейсе



Одно из новых свойств HTML5, которое привлекло наше внимание – это возможность редактировать контент при помощи внешнего интерфейса. Такая функция часто встречается в CMS – пользователи могут редактировать контент прямо при помощи своего браузера, но до сих пор она была реализована при помощи javascript и Ajax. HTML5 в значительной степени упрощает этот процесс, и предлагает нам атрибут «Contenteditable».

HTML5-атрибут Contenteditable: редактирование контента во внешнем интерфейсе

Каковы его функции

Когда этот атрибут применяется к элементу, он позволяет нам редактировать контент в этом элементе. Давайте рассмотрим пример, приведенный ниже:

<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 (Ресурсы).

HTML5-атрибут Contenteditable: редактирование контента во внешнем интерфейсе

Затем мы можем запросить эти данные для того, чтобы обновить контент, следующим образом:

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. Это означает, что мы можем использовать этот элемент, не задумываясь о запасных вариантах для устаревших браузеров.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: HTML 5
Опубликовал Design FactoRy   Прочитано (раз): 5773   |   Оставлено комментариев: 1
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 30 ноября 2013 @ 21:07
Написал: plutov — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
У contenteditable есть одна проблема со вставкой текста, сохраняется форматирование. Я решил это так - http://plutov.by/post/contenteditable_remove_style
s
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица США
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Июль 2017    »
ПнВтСрЧтПтСбВс
 12
3456789
10111213141516
17181920212223
24252627282930
31