HTML5 Contenteditable Атрибут Редактировать веб-контент на переднем конце
Одна из новых функций в HTML5 что меня привлекло, это родной редактор переднего плана. Эта функция обычно применяется в системах управления контентом для редактирования контента непосредственно из браузера и обычно полностью основана на JavaScript и AJAX. HTML5 упрощает процесс использования contenteditable атрибут.
Что оно делает
Применительно к любому элементу этот атрибут позволит нам редактировать содержание в нем, давайте посмотрим на пример ниже:
Печенье Маффин Круассан. Faworki датское печенье. Порошок мармеладного печенья, торт, печенье, халва, халва. Бисквитный жевательный мармелад.
Сладкий ролл тирамису шоколадный батончик сахарная слива карамель туцци ролл карамель. Шоколадный торт вайпас, сахарная вата, глазурь. Аппликационная кунжутная карамель, лакричное тесто, круассан, карамельки, кекс, пряники, печенье. Пончик ириски.
В этом примере мы добавили contenteditable приписать и установить его правда поэтому контент становится редактируемым. Есть два других значения, которые могут быть добавлены для этого атрибута;
ложныйчто делает наоборот: контент не будет редактируемымунаследовать; это сделает содержимое редактируемым, когда прямой родитель также можно редактировать.
- Посмотреть демо
Если вы ознакомились с демонстрацией выше, вы можете увидеть, что контент можно редактировать прямо из браузеров. Однако следует отметить, что этот элемент не охватывает хранение внесенных нами изменений, поэтому при обновлении страницы после внесения изменений содержимое будет возвращено.
Как сохранить изменения
Сохранение изменений зависит от того, где мы будем хранить данные; как правило, он будет сохранен в базе данных. Но так как у нас нет доступа к базе данных, в этом руководстве мы покажем вам, как сохранить изменения в 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 для старых браузеров.
