Una de las novedades de HTML5 que más me ha atraído es el editor nativo front-end. Esta característica se aplica comúnmente en los sistemas de gestión de contenidos para editar el contenido directamente desde el navegador y por lo general se construye totalmente con JavaScript y AJAX. HTML5 viene a facilitar un poco el proceso mediante el atributo contenteditable.
Para qué Sirve el Atributo Contenteditable
Cuando se aplica a cualquier elemento, este atributo nos permitirá editar el contenido del mismo, veamos el ejemplo a continuación:
<article id="contenido1" contenteditable="true">
<p>Galleta muffin croissant. Faworki danés bizcocho. Jujubes en polvo galleta pastel bizcocho halvah halvah. Galleta gomitas jalea galleta.</p>
<p>Rollo dulce tiramisú barra de chocolate ciruela azucarada caramelos rollo de tootsie caramelos. Pastel de chocolate wypas algodón de azúcar glaseado. Applicake brochetas de sésamo regaliz pastelería croissant caramelos pastel de frutas jengibre galleta. Dona toffee bastones de caramelo.</p>
</article>En este ejemplo, hemos agregado el atributo contenteditable y lo hemos establecido en true para que el contenido sea editable. Hay dos valores adicionales que se pueden agregar para este atributo:
false, lo cual hace lo contrario: el contenido no será editable.inherit; hará que el contenido sea editable cuando el padre directo también sea editable.
Si has echado un vistazo a la demo anterior, puedes ver que el contenido se puede editar directamente desde el navegador. Sin embargo, debe tenerse en cuenta que este elemento no cubre el almacenamiento de los cambios que hemos hecho, por lo que cuando se actualiza la página después de haber hecho el cambio, el contenido se revertirá.
Cómo Guardar los Cambios
Continuando: Guardar los cambios depende de dónde almacenaremos los datos; comúnmente, se guardarán en una base de datos. Pero dado que no tenemos acceso a una base de datos, en este tutorial, te mostraremos cómo guardar los cambios en el almacenamiento local (localStorage). Para hacerlo, también utilizaremos un poco de jQuery para simplificar el código. Te recomiendo que consultes “Local Storage – Dive Into HTML5” como referencia adicional.
En primer lugar, agreguemos un botón junto a nuestro contenido.
<article id="contenido2" contenteditable="true">
<p>Rollo dulce tiramisú barra de chocolate ciruela azucarada caramelos rollo de tootsie caramelos. Pastel de chocolate wypas algodón de azúcar glaseado. Applicake brochetas de sésamo regaliz pastelería croissant caramelos pastel de frutas jengibre galleta. Dona toffee bastones de caramelo.</p>
</article>
<button id="save">Guardar Cambios</button>La idea aquí es que almacenaremos los cambios una vez que el botón sea presionado. Por lo tanto, vamos a establecer este evento a través del script;
var theContent = $('#content2');
$('#save').on('click', function(){
var editedContent = theContent.html();
localStorage.newContent = editedContent;
});Este código creará una nueva clave en localStorage que contendrá el último cambio realizado en el contenido. Podemos utilizar la herramienta Developer Tools para aclarar si los datos se han almacenado correctamente o no. Para los usuarios de Firefox, vamos al panel DOM y buscamos localStorage. Tanto en Chrome como en Safari, podemos verlo en la pestaña ‘Application’.
A continuación, podemos recuperar estos datos para actualizar el contenido, como se indica a continuación;
if(localStorage.getItem('newContent')) {
theContent.html(localStorage.getItem('newContent'));
}El código anterior identificará el elemento newContent del localStorage y si existe, pasará el valor al elemento seleccionado, en este caso #content2. En este punto, cuando actualicemos la página, deberíamos seguir viendo el cambio que hemos realizado.
Reflexión Final
En los viejos tiempos, añadir la función de editor front-end como habíamos demostrado, podía llevar horas o incluso semanas. Hoy en día, se tarda sólo un segundo con este atributo, contenteditable.
Y, según caniuse.com, este atributo ya está soportado en los populares navegadores como los siguientes: Firefox, Chrome, Safari, Edge y Opera. Esto significa que podemos utilizar este elemento con tranquilidad sin tener que configurar fallbacsk para navegadores antiguos.
