Una de las características de HTML5 es que permite a los usuarios editar contenido directamente en el navegador. Este posta explicará como crear una página editable. El atributo contenteditable permite modificar todo el contenido que tenga el elemento contenedor.
|
1 2 3 4 5 |
<article contenteditable> <h2>Ejemplo de página editable</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lectus diam, lacinia vel imperdiet vitae, elementum id felis.</p> </article> |
Ejemplo de contenteditable
Compatibilidad y funcionalidad
Este atributo lo soportan todos los navegadores actuales y aunque parezca mentira, también Internet Explorer 6. De hecho, contenteditable tuvo su primera aparición en IE 5.5 y desde entonces estuvo incorporado en otros navegadores. Originalmente estaba diseñado para soportar un editor como el WYSIWYG (What You See Is What You Get).
Sin embargo, sólo permite a los usuarios editar contenido. No tiene ninguna funcionalidad para salvar las ediciones, tampoco generar controles de edición que se suelen ver en los editores WYSIWYG. Para generar un editor de esa clase sería preciso incorporar JavaScript y usar una API (Application Programming Interface). También se podría guardar el contenido editado con JavaScript y AJAX.
Podrías usar contenteditable para mostrar como luciría un texto con una tipografía. Lo bueno de este atributo es que se adapta bien tanto al código HTML como el CSS. En este caso se sigue usando el ejemplo anterior, pero añadiendo una fuente de Google Fonts.
|
1 2 3 4 5 6 |
<link href="https://fonts.googleapis.com/css?family=Play" rel="stylesheet"> <style> p{ font-family: 'Play', sans-serif; } </style> |
Uso de contenteditable en Chrome
Y hasta aquí el post de hoy, espero que os haya gustado. Pasad un buen puente 🙂