Explicamos el uso y funcionamiento de uno de los nuevos atributos que acompañan a HTML5: contentEditable. Los navegadores más modernos soportan esta especie de “rich text box” de forma que el usuario pueda editar contenido HTML “in situ”.

Autor:

Hola! Soy diseñador, programador web y cofundador de la startup Cokidoo, desarrollamos aplicaciones web a gran escala y comercio electrónico, aplicaciones para móviles y advertising. Puedes seguirme através de mi twitter y ver algunos de mis themes en Themeforest. También soy aficionado a la fotografía.
Descarga Demostración

¿Qué es contentEditable?

Para ser exactos existen dos elementos similares envueltos: designMode y contentEditable, similares pero con distintos objetivos.

El atributo designMode está enfocado en la edición de todo el documento, por tanto podríamos decir que es un editor HTML al uso con el que editar todo un documento.

Por otra parte contentEditable sólo permite editar los elementos que tengan este atributo asignado dentro de un documento, además de los elementos “hijo” contenidos dentro del “padre”.

Los atributos designMode y contentEditable se emplean para activar el modo edición en documentos enteros o elementos concretos respectivamente.

Si bien actualmente existen multitud de editores “WYSIWYG” (What You See Is What You Get / lo que ves es lo que obtienes), es de esperar que con el avance y estandarización de HTML5, estos vayan quedando en un segundo plano en pro de la integración nativa con los navegadores y su modo de edición.

Aprendiendo a utilizar contentEditable en HTML5

Como hemos mencionado en la introducción, estamos tratando con un atributo asignable a distintas etiquetas HTML, por lo que el uso es realmente trivial como podemos ver en el siguiente ejemplo:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>contentEditable: Contenido editable en HTML5</title>
	<link rel="stylesheet" href="main.css" />
</head>
<body>
	<article>
		<header>
			<h1>Contenido Editable con HTML5</h1>
		</header>
	
		<section>
			<p>
				Mediante el atributo "contentEditable" podremos convertir nuestros elementos en contenido editable, al más puro estilo richtextbox.
				Haz <strong>click para editar</strong>.
			</p>
		</section>
		
		<section>
			<h2>Tareas a realizar la próxima semana:</h2>
			<ol contentEditable="true">
				<li>Redactar nuevos tutoriales para <a href="http://web.ontuts.com">Ontuts</a>.</li>
				<li>Dominar el mundo con <a href="http://erasmusu.com">Erasmusu.com</a>.</li>
				<li>Sacar a pasear a Coki.</li>
				<li>Introduce <em>siguiente tarea</em> aquí...</li>
			</ol>
		</section>
		
	</article>
</body>
</html>

Basta con asignar el atributo editableContent=”true” a la lista ordenada para poder editar los elementos actuales e incluso introducir más elementos a la misma.

El código CSS

Como curiosidad he querido resaltar algún que otro selector que a más de uno puede resultarle confuso o nuevo:

[contenteditable]{
	border: 1px dotted transparent;
}
[contenteditable]:hover{
	background: #fff7c3;
	border: 1px dotted #f0df6c;
}
section > *{
	margin: 1em;
}

Empleamos [contenteditable] y [contenteditable]:hover para asignarle estilo a los elementos que tengan activo el modo edición, tanto para su estado normal como para cuando el usuario pasa el cursor por encima de los mismos. No es espetacular pero ayuda a orientar al usuario:

Previa del tutorial

Para los más inexpertos en HTML5 simplemente comentarles que las etiquetas <header> y <section> son nuevas y simplemente se emplean para separar dentro de un artículo <article> con cabecera y secciones del mismo.

¿Qué navegadores lo soportan?

Como ocurre con la mayoría de novedades de HTML 5, los navegadores más recientes las soportan “sin problemas”:

  • Firefox 3.
  • Google Chrome.
  • Internet Explorer (desde la 5.5).
  • Opera 9.
  • Safari 3.

Y como más de uno habrá podido deducir con las comillas anteriores “sin problemas”… el demonio está en los detalles, por lo que os aconsejo esta demo online con la que probar los distintos navegadores.

Como curiosidad acerca de sus orígenes…

Sorprendentemente estos dos atributos (designMode y contentEditable) fueron originalmente diseñados e implementados por Microsoft con la versión Internet Explorer 5.5, aunque estaban explicados con una buena documentación en la realidad carecían de una buena funcionalidad, eran bastante engorrosos.

Conclusión final

Nada más conocer esta nueva característica me he parado a pensar en las horas que hemos perdido muchos desarrolladores en tratar de generar una “rich text box” en condiciones y todas las trabas e incompatibilidades que nos hemos encontrado a lo largo del proceso… ojalá que por fin estos atributos nos ayuden y faciliten un poco la vida, tanto a nosotros como al propio usuario final.

Me viene a la cabeza Erasmusu… en su día implementáramos nuestro propio rich text box con emoticonos, negrita, cursiva, etc, para los comentarios y foros y la verdad es que fue un dolor de cabeza contínuo. Al final optamos por el texto plano enriquecido de toda la vida :) .

¡Nos vemos en la próxima publicación!

Te sugerimos otras entradas relacionadas...

No hay entradas relacionadas para esta publicación.

¿Necesitas desarrollar un proyecto web o para móviles? ¡Estamos disponibles!

Visitar Cokidoo

Cokidoo, los creadores de Ontuts, desarrollamos proyectos tecnológicos centrados en redes sociales y aplicaciones web, aplicaciones móviles y consultoría web y bases de datos.

Somos jóvenes, inquietos, versátiles, apasionados por la innovación y enfocados en las nuevas tecnologías. Con Ontuts tratamos de compartir nuestro conocimiento adquirido en los distintos proyectos, ayudando a la comunidad y mostrando nuestra capacidad tecnológica.

Si necesitas un presupuesto sin compromiso, estamos disponibles, no dudes en contactar con nosotros.

Comentarios en esta publicación (8 comentarios)

¿Te ha gustado esta publicación? ¡Puedes compartir tu opinión con todos nosotros! Simplemente pincha aquí mismo.

La verdad es que los campos editables son todo un tema… tengo que probar esto a ver que tal.

Por ahora el CKEditor me ofrece lo que necesito, pero si se puede simplificar bienvenido sea!

@josepzin hay soluciones como la que comentas muy buenas, pero también porque hasta ahora como comento han sido un coñazo de implementar por cuenta propia… esperemos que según HTML5 se establezca, todo esto sea sencillo :)

Adrián excelente tutorial…. me viene dos interrogantes que me encantaría aclarar:

1*) ¿Estos dos atributos son originarios del HTML5, y donde podría conseguir mas atributos maravillosos como estos :O?

2*) ¿Con respecto al atributo designMode se usa igual al otro asignándoselo a una etiqueta, y de ser así cual es su diferencia?

@Robert gracias por tus comentarios! Los atributos tendrán ahora más sentido y compatibilidad en HTML5, pero como hemos comentado algunos ya existían en Internet Explorer 5.5… designMode se puede activar mediante javascript document.designMode = on / off, pero mejor es que le eches tu mismo un vistazo: http://dev.w3.org/html5/spec/editing.html

Hello my friend,

please, can you share your theme for wordpress ?

best regards

HTML5

Hola muy buen artículo,

Para saber más sobre HTML5 os recomiendo

http://www.foroshtml5.com

saludos!

Mike

esta interesante esta aplicacion de hacer editable las secciones pero … por el momento no se me ocurre algun ejemplo para poder utilizarlo … se me ocurre si acaso para usarlo como tipo wikipedia que puede corregirse o cambiarse el contenido y guardarlo … algun otro ejemplo que puedan aportar para el uso del contenteditable?