Crear Texto Editable con HTML5

Escrito por Jose M Ramirez en . Publicado en Tutoríal


Unas de las mejoras que trajo HTML5 fue la modificación del atributo ‘contenteditable’ haciendo más fácil integrarlo a cualquier parte de nuestro código en algunas etiquetas. Aunque realmente esta función ya existe en muchos sitios web con plugins y editores de texto externos tipo WYSING, la siempre es tener todo de forma nativa, tomando en cuenta que esto no supera la manejabilidad del que ya es el más usado, se puede considerar el atributo como un inicio de los editores texto en HTML5.

La aplicación es increíblemente sencilla si estas familiarizado con HTML, simplemente se agrega luego de la etiqueta como cualquier atributo seguido de ‘true/false’ para activar o desactivar.

Veamos la práctica.

<p contenteditable="true">
El contenido dentro de estas etiquetas es editable
</p>

Y el resultado se vería como de la siguiente forma

Contenido Editable

Todo lo que está escrito aquí puede ser borrado y editado, además si integramos una lista, al presionar la tecla ‘enter’ desde el explorador en el campo de la lista, esta seguirá generando la numeración correspondiente como vemos en este ejemplo:

  1. Primer ejemplo de la lista
  2. Segundo ejemplo de la lista
  3. Tercer ejemplo de la lista

Como vimos es muy sencillo. La apariencia se puede mejorar mediante CSS y podemos incluir muchas otras etiquetas.

Para que puedan hacer sus pruebas les dejo el código que use arriba.

<h2>Contenido Editable</h2>
<p contenteditable="true">
Todo lo que está escrito aquí puede ser borrado y editado,
además si integramos una lista, al presionar la tecla ‘enter’
desde el explorador en el campo de la lista, esta seguirá
generando la numeración correspondiente como vemos en este ejemplo:
<ol contenteditable="true">
          <li>Primer ejemplo de la lista</li>
	<li>Segundo ejemplo de la lista</li>
	<li>Tercer ejemplo de la lista</li>
</ol>
</p>

Etiquetas:

Trackback desde tu sitio.

Dejar un Comentario

Sígueme en twitter

Twitter

Suscríbete al Feed

RSS-Feed

Red de Blogs

Red de Blogs iBlogLabs