HTML5 Contenteditable Attribute Editar contenido web en el front-end

Una de las novedades en HTML5 Lo que me atrajo es el editor de front-end nativo. Esta función se aplica comúnmente en los sistemas de gestión de contenido para editar el contenido directamente desde el navegador y, por lo general, se crea completamente con JavaScript y AJAX. HTML5 viene para hacer el proceso un poco más fácil usando contenteditable atributo.

Que hace

Cuando se aplica a cualquier elemento, este atributo nos permitirá editar El contenido en él, veamos el siguiente ejemplo:

 
Croissant de muffin de galleta. Faworki, galleta danesa. Jujubes polvo galleta pastel galleta halvah halvah. Bizcocho de galletas de gelatina.
 
Rodillo dulce tiramisú barra de chocolate azúcar ciruela caramelo tootsie roll caramelo. Pastel de chocolate wypas glaseado de algodón de azúcar. Applicake sésamo encaje regaliz pastelería croissant caramelos pastel de frutas pan de jengibre galletas. Bastones de caramelo del caramelo del buñuelo.
 
 

En este ejemplo, hemos añadido contenteditable atribuirlo y configurarlo cierto por lo que el contenido se vuelve editable. Hay otros dos valores que se pueden agregar para este atributo;

• falso que hace lo contrario: el contenido no será editable.
• heredar; se convertirá en el contenido editable cuando el padre directo es editable tambien.

• Ver demostración

Si ha revisado la demostración anterior, puede ver que el contenido se puede editar directamente desde los navegadores. Sin embargo, debe tenerse en cuenta que este elemento no cubre el almacenamiento de los cambios que hicimos, por lo que cuando actualice la página después de haber realizado el cambio, el contenido se revertirá..

Cómo guardar los cambios

Guardar los cambios depende de dónde almacenaremos los datos; En general, se guardará en una base de datos. Pero como no tenemos acceso a la base de datos, en este tutorial, le mostraremos cómo guardar los cambios en almacenamiento local. Para hacerlo, también usaremos un poco de jQuery para simplificar el código. Le recomendé que consulte el pasado, el presente y el futuro del almacenamiento local para aplicaciones web como referencia adicional..

En primer lugar, vamos a añadir un botón al lado de nuestro contenido.

 
 
Rodillo dulce tiramisú barra de chocolate azúcar ciruela caramelo tootsie roll caramelo. Pastel de chocolate wypas glaseado de algodón de azúcar. Applicake sésamo encaje regaliz pastelería croissant caramelos pastel de frutas pan de jengibre galletas. Bastones de caramelo del caramelo del buñuelo.
 
 Guardar cambios 

La idea aquí es que almacenaremos los cambios una vez que se haga clic en el botón. Por lo tanto, vamos a establecer este evento a través de la secuencia de comandos;

 var theContent = $ ('# content2'); $ ('# save'). on ('click', function () var editedContent = theContent.html (); localStorage.newContent = editedContent;); 

Este código creará una nueva clave en localStorage que contiene el último cambio realizado en el contenido. Podemos usar Firebug o las Herramientas de desarrollo para aclarar si los datos se han almacenado con éxito o no, pero asegúrese de presionar el botón. Para usuarios de Firefox, vaya a la DOM Panel y búsqueda de localStorage. Tanto en Chrome como en Safari, podemos verlo en la pestaña 'Recursos'.

Luego podemos recuperar estos datos para actualizar el contenido, de la siguiente manera;

 if (localStorage.getItem ('newContent')) theContent.html (localStorage.getItem ('newContent'));  

El código anterior identificará el artículo nuevo contenido desde localStorage y, si existe, pasará el valor al elemento seleccionado, en este caso # content2. En este punto, cuando actualizamos la página, todavía deberíamos ver el cambio que hicimos..

• Ver demostración
• Descargar fuente

Pensamiento final

En los viejos tiempos, agregar la función de editor de aplicaciones para usuario como lo habíamos demostrado, puede llevar horas o incluso semanas. Hoy en día, solo toma un segundo con este atributo., contenteditable.

Y, de acuerdo con caniuse.com, este atributo ya es compatible, (sorprendentemente) en IE7 + y (como era de esperar) en otros navegadores de la siguiente manera: Firefox 12, Chrome 20, Safari 5.1 y Opera 12. Eso significa que podemos usar este elemento con paz de la mente sin tener que configurar fallbacsk para navegadores antiguos.