Crear contenido editable en HTML5

28/feb/2012 HTML5 , , 6 Comentarios
Logo HTML5

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.

  1. <div id="micapa" style="border: thin solid;padding:10px;">
  2. Inserta la pregunta que quieras hacernos...
  3. </div>

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.

  1. <div id="micapa" contentEditable="true" style="border: thin solid;padding:10px;">
  2. Inserta la pregunta que quieras hacernos...
  3. </div>

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.

Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

6 comentarios en “Crear contenido editable en HTML5”

Víctor Cuervo

Víctor Cuervo

@irvin, por ejemplo, puedes irlo persistiendo en el localStorage de la página. De esta manera el contenido a cargar de la capa, al iniciar la página, será el localStorage.

Tienes algún ejemplo de uso del localStorage en http://lineadecodigo.com/html5/listar-el-contenido-de-local-storage-en-html5/

Espero que te oriente. Saludos.

Víctor Cuervo

Víctor Cuervo

@arleyhr, Puedes detectar la perdida de foco de la capa.

Víctor Cuervo

irvin

Hola buenas si funciona pero como hago para que conserve los cambios no solo que lo edite y despues de volver a cargar la pagina se borre si no que conserve los cambios

Víctor Cuervo

arleyhr

Tengo una pregunta, ¿es posible detectar el momento en que se ha terminado de editar el contenido de la caja editable?¿Cual? gracias Salu2

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*


*