Artículos
HTML5

Crear contenido editable en HTML5

28/Feb/2012

Una de las nuevas capacidades que encontramos dentro de HTML5 es la de definir un contenido editable. Es decir, nos permite insertar elementos dentro del documento web los cuales el usuario puede editar desde el navegador y modificar su contenido.

Lógicamente ampliando las capacidades ya existentes con el TEXTAREA para introducir texto. Así al poder crear contenido editable en HTML5 podremos estar cerca de tener un editor web (o diseñador web) de las páginas web o editores de texto con formato enriquecido.

La forma de crear contenido editable en HTML5 es muy sencilla. Lo primero que haremos será definir una capa de contenido DIV. Sobre dicha capa insertaremos texto.

Inserta la pregunta que quieras hacernos...

Podemos observar que hemos dado un pequeño estilo a la capa agregandola un borde y un espaciado del contenido con respecto al borde.

Para convertir a la capa en editable y así poder crear contenido editbale nos bastará con añadir el atributo contentEditable y asignarle un valor de true. Ya que por defecto este atributo vendrá con un valor de false.

Inserta la pregunta que quieras hacernos...

Simplemente con la inclusión de este contentEditable hemos conseguido crear contenido editable en HTML5. Ahora cuando carguemos la página en el navegador y pulsemos sobre el texto veremos como el navegador nos deja modificar el contenido de la capa.

Como siempre con la especificación HTML5 (al menos de momento), deberemos de tener cuidado con el soporte de los navegadores del atributo contentEditable, ya que nos podemos encontrar que alguna versión no lo soporte.

Vídeos sobre HTML5

Disfruta también de nuestros artículos sobre HTML5 en formato vídeo. Aprovecha y suscribete a nuestro canal.

Test HTML5

¿Te atreves a probar tus habilidades y conocimiento en HTML5 con nuestro test?

Test HTML5
Suscribir
Notificar de
guest
7 Comentarios
Recientes
Anteriores Más votados
Opiniones integradas
Ver todos los comentarios