Propiedad contentEditable de HTML 5. Programación en Castellano.

Categorías destacadas

Artículo

Inicio Artículo Internet HTML

¡votar!

Propiedad contentEditable de HTML 5

Como ya vimos en un artículo anterior, donde hacíamos referencia a los nuevos atributos que nos proporciona HTML 5. ContentEditable es uno de estos nuevos atributos que nos permitirá editar los elementos que lo contengan dentro del documento, además de los elementos hijos dentro del padre.

Veamos como funciona esta etiqueta por medio de un ejemplo. Lo primero que hacemos es crearnos un documento HTML, y le asignamos a distintos elementos esta nueva propiedad.

<!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>

Si nos fijamos en el código, el atributo se lo hemos asignado a la lista ordenada, por lo que sus elementos deberán de ser editables. Al atributo hay que darle el valor a true para que así sea.

Con esto sería suficiente, no habría que hacer nada más, pero si que es buena idea lo que muchos desarrolladores hacen y es crear estilos para resaltar los elementos que son editables. En el ejemplo anterior, hemos creado una clase para este fin.

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

Si alguien lo ve interesante para utilizarlo en sus desarrollos, debe de tener en cuenta que hoy por hoy no todos los navegadores aceptan esta propiedad. Aquellos navegadores que si que lo aceptan actualmente son:

•Firefox 3
•Google Chrome
•Opera 9
•Safari 3
•Internet Explorer (desde la versión 5.5)

Vía: web.ontuts.com