HTML сегодня обладает очень богатыми функциональными возможностями и они постоянно расширяются. Например, можно сделать редактирование контента прямо на странице, без перехода в режим правки материала. Для этого достаточно применить атрибут contenteditable и написать небольшой код на JavaScript, который будет отправлять сохранения на сервер.
Как использовать атрибут contenteditable? Пример кода ниже:
Достаточно просто указать атрибут contenteditable без значения – и практически любой элемент таким образом может стать редактируемым. Но как сохранить сделанные изменения? Для этого необходимо использовать JavaScript и отправлять измененный контент на сервер при помощи Ajax.
Как может выглядеть код JavaScript для реализации функции сохранения контента? Например, если использовать библиотеку jQuery, то так:
Таким образом, отредактировать текст прямо на странице и сохранить его совсем просто. Конечно, можно улучшить код и сделать небольшой визуальный редактор, который упростил бы работу с текстом. В Drupal, например, есть визуальный редактор Quick Edit, который позволяет редактировать контент прямо на странице, но это уже другая тема. Стоит взять на заметку, что в разных браузерах может отличаться реализация работы атрибута contenteditable, но главное, что этот атрибут поддерживается почти во всех браузерах.
Имеется таблица с 4 столбцами. У ячеек таблицы установлен атрибут contenteditable. Вся информация выводится с БД.
Нужно сделать так что бы редактируемая информация в ячейках сохранялась в БД. Мне удалось реализовать сохранение ячеек только последнего столбца. Параметр data-id я передаю в файл script.js.
С помощью Ajax эти значения отправляются в файл index.php, откуда они добавляются в базу:
Но это только для полей одного столбца. А как сделать для тоже самое только для поля «name»?
Одно из новых свойств HTML5, которое привлекло наше внимание – это возможность редактировать контент при помощи внешнего интерфейса. Такая функция часто встречается в CMS – пользователи могут редактировать контент прямо при помощи своего браузера, но до сих пор она была реализована при помощи javascript и Ajax. HTML5 в значительной степени упрощает этот процесс, и предлагает нам атрибут «Contenteditable».
Каковы его функции
Когда этот атрибут применяется к элементу, он позволяет нам редактировать контент в этом элементе. Давайте рассмотрим пример, приведенный ниже:
В данном примере мы добавили атрибут Contenteditable и выставили значение «true», и теперь контент можно редактировать. Есть также 2 других значения, которые можно использовать с этим атрибутом:
False – позволяет исключить возможность редактирования контента
Inherit – позволяет сделать контент редактируемым, если родительский элемент также позволяет редактирование
Если вы ознакомились с демо, приведенным выше, вы могли видеть, что контент можно редактировать прямо при помощи окна браузера. Тем не менее, следует отметить, что элементы не сохраняют измененные значения, а значит, после перезагрузки страницы все вернется на свои места.
Как мы можем сохранить значения
Сохранение значений зависит от того, где будут размещаться данные. Обычно они сохраняются в базе данных. Но так как у нас нет доступа к базе данных, в данном руководстве, мы хотим показать вам, как можно сохранить данные в localStorage. Для этого мы также воспользуемся jQuery, и упростим код. Мы рекомендуем вам также ознакомиться со статьей под названием « The Past, Present & Future of Local Storage for Web Applications ».
Прежде всего, давайте добавим кнопку рядом с нашим контентом.
Здесь суть заключается в том, что мы будем сохранять изменения при нажатии кнопки. Поэтому, давайте проведем это событие при помощи скрипта:
Данный код создаст новый ключ в localStorage, который будет содержать последние внесенные изменения. Вы можем использовать Firebug или Developer Tools, чтобы уточнить, была ли информация сохранена успешно или нет, только не забудьте нажать на кнопку. Для пользователей Firefox: нужно пройти в панель DOM, и найти там localStorage. В Chrome и в Safari мы можем найти это во вкладке Resources (Ресурсы).
Затем мы можем запросить эти данные для того, чтобы обновить контент, следующим образом:
Вышеприведенный код идентифицирует пункт newContent в localStorage и, если он присутствует, проведет значение в выбранный элемент, в данном случае в #content2. На данном этапе, когда мы обновляем страницу, внесенные изменения сохраняются.
Раньше реализация такого функционала заняла бы десятки часов, а то и неделю. Сегодня же это все делается в течение получаса при помощи атрибута contenteditable.
И, судя по caniuse.com , этот атрибут уже поддерживается (что удивительно) в IE7+ и (что не удивительно) в других браузерах: Firefox 12, Chrome 20, Safari 5.1 и Opera 12. Это означает, что мы можем использовать этот элемент, не задумываясь о запасных вариантах для устаревших браузеров.
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях: