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

Одна из новых функций в HTML5, которая привлекла меня, – это встроенный редактор интерфейсов. Эта функция обычно применяется в системах управления контентом для редактирования контента непосредственно из браузера и обычно полностью основана на JavaScript и AJAX. HTML5 упрощает процесс, используя атрибут contenteditable.

Что оно делает

Применительно к любому элементу этот атрибут позволит нам редактировать содержимое в нем, давайте рассмотрим пример ниже:

В этом примере мы добавили атрибут contenteditable и установили его значение true, чтобы содержимое стало редактируемым. Есть два других значения, которые могут быть добавлены для этого атрибута;

• false, что делает наоборот: контент не будет редактируемым
• унаследуют; содержимое станет доступным для редактирования, если прямой родитель также доступен для редактирования.

Если вы ознакомились с демонстрацией выше, вы можете видеть, что контент можно редактировать прямо из браузеров. Однако следует отметить, что этот элемент не охватывает сохранение внесенных нами изменений, поэтому при обновлении страницы после внесения изменений содержимое будет восстановлено.

Как сохранить изменения

Сохранение изменений зависит от того, где мы будем хранить данные; как правило, он будет сохранен в базе данных. Но поскольку у нас нет доступа к базе данных, в этом руководстве мы покажем вам, как сохранить изменения в LocalStorage, Для этого мы также будем использовать немного jQuery, чтобы сделать код проще. Я рекомендовал вам взглянуть на Прошлое, настоящее и будущее локального хранилища для веб-приложений как дальнейшая ссылка.

Прежде всего, давайте добавим кнопку рядом с нашим контентом.

Сохранить изменения

Идея здесь заключается в том, что мы будем сохранять изменения после нажатия кнопки. Итак, давайте установим это событие через скрипт;

var theContent = $ (‘# content2’);

$ (‘# save’). on (‘click’, function () {
var editedContent = theContent.html ();
localStorage.newContent = editedContent;
});

Этот код создаст новый ключ в localStorage, содержащий последние изменения, внесенные в содержимое. Мы можем использовать Firebug или Developer Tools, чтобы уточнить, были ли данные успешно сохранены или нет, но убедитесь, что вы нажали кнопку. Для пользователей Firefox перейдите на панель DOM и найдите localStorage. В Chrome и Safari мы видим это на вкладке «Ресурсы».

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

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. Это означает, что мы можем использовать этот элемент со спокойной душой, не настраивая fallbacsk для старых браузеров.