Tips HTML5 – Usando ContentEditable

Anteriormente se recurría a distintos métodos para lograr que el contenido de nuestra web fuera editable, generalmente amparados en el uso de JavaScript, pero con la llegada de HTML5, también se introdujo un mecanismo de edición de contenidos.

El atributo contenteditable fue pensado para proveer una experiencia WYSIWYG, muy similar a las que se pueden ver en editores de blog y otros sitios tales como Flickr, donde se puede empezar a editar el contenido de la pagina con solo hacer clic en un área determinada.

Este atributo 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”, a menos claro que se indique explícitamente lo contrario.

Su uso es realmente sencillo:

<div>

    <h1>Lista de compras</h1>

    <section id="editable" contenteditable="true">

        <p>Apuntar los artículos que se deben comprar</p>

        <ul>

            <li>Carne</li>

            <li>Pollo</li>

            <li>Naranjas</li>

            <li>Zanahoria</li>

        </ul>

    </section>

</div>

Así, podríamos tener una lista de compras totalmente editable, tal como podemos ver a continuación:

Lista de compras

Apuntar los articulos que se deben comprar

• Carne
• Pollo
• Naranjas
• Zanahoria