feed twitter facebook LinkedIn facebook

HTML5 » Crear contenido editable en HTML5

febrero 28, 2012 por Víctor Cuervo 6 Comentarios Imprimir Imprimir

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.

Visualizar el Codigo
Visualiza el artículo
Descargar el Codigo
Descargar el código
Error en el Codigo
Error en el código
Foro sobre HTML5
Foro sobre HTML5
tags: , , , , ,

Artículos relacionados:

6 comentarios »

RSS feed para los comentarios de esta entrada.TrackBack URI

  1. Linea de Codigo » Crear un documento editable con HTML5
    marzo 20, 2012 #

    [...] por Víctor Cuervo . 1 visitas Sin Comentarios  Imprimir Ya veíamos en otro artículo como en HTML5 tenemos la capacidad de definir áreas o elementos que sean editables. Para ello nos basábamos en el atributo general de HTML5 contentEditable.Pero con HTML5 podemos [...]

  2. Crear un documento editable con HTML5 | Diseño web económico
    marzo 20, 2012 #

    [...] veíamos en otro artículo como en HTML5 tenemos la capacidad de definir áreas o elementos que sean editables. Para ello nos basábamos en el atributo general de HTML5 [...]

  3. arleyhr
    octubre 5, 2013 #

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

  4. irvin
    febrero 28, 2014 #

    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

  5. Víctor Cuervo
    febrero 28, 2014 #

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

  6. Víctor Cuervo
    febrero 28, 2014 #

    @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.

Deja un comentario

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*