Nuevos atributos HTML5 para Rich-text editing

  • Por
Explicaciones generales de los nuevos atributos HTML5 contenteditable y spellcheck y herramientas básicas que podemos usar a partir de HTML5 para edición de contenidos enriquecidos Rich-text editing.
HTML5 viene con muchas mejoras, como bien sabemos. En este artículo vamos a ver dos atributos nuevos que nos sirven para editar de una manera cómoda elementos de la página. Es decir, cómo realizar elementos como etiquetas cuyo contenido se puede marcar como editable por el usuario. Además, veremos otro atributo que jugará muy a favor de la creación de un contenido correcto gramaticalmente, que es el llamado spellcheck. Ambos atributos, junto con otras de las nuevas características de HTML5 que repasaremos a continuación, serán la base para hacer con Javascript contenido editable enriquecido por medio de HTML, osea, editar contenido y que además tenga un formato básico, como negritas, itálicas, etc.

En este artículo nos dedicaremos simplemente a conocer las nuevas características del HTML5 para hacer contenido editable, dejando la parte del Javascript para un futuro artículo donde usaremos el método execCommand para crear una interfaz de usuario en Javascript que nos permita asignar formato e los elementos.

En el presente artículo trataremos los siguientes puntos:

  • El nuevo atributo contenteditable
  • El nuevo atributo spellcheck
  • La edición simple de textos con formato HTML
  • Los atajos del teclado y el menú emergente en las áreas de edición

Referencias oficiales

Lo básico de "contenteditable"

Mediante este atributo podremos realizar ediciones de texto con todo el potencial del lenguaje HTML en el interior de nuestras propias páginas web. El texto en sí esta etiquetado con el mismo lenguaje de marcas que el documento HTML de la página web. Esto es, las áreas de texto pueden convertirse en áreas de edición, de manera que podremos realizar los formateos y gestiones tales que –entre otros-:
  • Resaltados, negrilla, itálica, subrayado, …
  • Encabezados, títulos y subtítulos
  • Manejo de estilos de todo tipo
  • Copiado y pegado de textos
  • Hipervínculos
  • Viñetas, lista y lista numerada
  • Fuentes y tamaños de fuente
  • Colores de fuente y fondos
  • ...
Por el contrario, no dispondremos de facilidades para el trabajo con imágenes ni de forma directa, acceso a archivos –abrir y guardar-.

El atributo contenteditable se mimetizaba, en versiones anteriores de HTML, mediante bibliotecas de JavaScript y similares, pero no es hasta su aparición en HTML 5 cuando ha comenzado a cobrar gran importancia por su simplicidad y potencia, siendo soportado por la totalidad de los principales navegadores de Internet –véase la tabla adjunta-

Chrome Firefox I. Explorer Opera Safari Android
6.0 3.5 6.0 8.0 3.2 3.0

La sintaxis es del todo simple:

<elemento contenteditable="true|false|inherit" [...]>

  • True: su contenido será editable
  • False: no lo será
  • Inherit: será editable si el elemento padre lo es –si hereda la editabilidad-
Ejemplos de elementos sobre los que se puede aplicar son todos los que atañen a contenidos de texto, como párrafos, secciones, divisiones, etc. En los dos breves listados sintácticos que siguen se ilustra su uso.

<p contenteditable="true">
Escribir aquí ...
</p>

Aquí aplicado a una sección que incluye otros elementos como cabecera y parágrafo:

<section contenteditable="true">
<h1>Título</h1>
<p>Escribir aquí...</p>
</section>

Listado 1: Ejemplo simple de uso del atributo contenteditable

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" lang="es-es">
<title>contenteditable</title>
</head>
<body>

<section contenteditable="true">
<h1>Edición</h1>
<p>Escribir aquí...</p>
</section>

</body>
</html>

El atributo "spellcheck"

Se trata de otro atributo nuevo de HTML 5, de una potencia extraordinaria. Es también un atributo global. Se realizará una comprobación ortográfica y gramatical de los textos contenidos dentro de la etiqueta que tenga el atributo, en función del idioma definido para la página HTML. De encontrarse un error, como en los procesadores de textos, se harán las propuestas oportunas o se permitirá incluir el término en un diccionario personal.

Con una sintaxis muy similar a contenteditable, puede y será muy recomendable utilizarse conjuntamente, como veremos en nuestro ejemplo:

<elemento spellcheck="true|false" [...]>

  • True: su contenido será comprobable
  • False: no lo será
El atributo spellcheck es actualmente soportado por la totalidad de los principales navegadores de Internet –véase la tabla adjunta-, aunque, eso sí, en sus versiones más recientes.

Chrome Firefox I. Explorer Opera Safari Android
10.0 9.0 10.0 11.0 4.0 2.3

Listado 2: Ejemplo simple de uso del atributo contenteditable con spellcheck

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" lang="es-es">
<title>contenteditable</title>
</head>
<body>

<section contenteditable="true" spellcheck="true">
<h1>Título</h1>
<p>Escribir aquí...</p>
</section>

</body>
</html>

Usemos estilos

Podremos, lógicamente, dar la apariencia deseada a nuestra área de edición mediante la utilización de estilos. En el ejemplo que sigue:
  1. Marcamos un ancho
  2. Marcamos un alto
  3. Fijamos un borde
  4. Marcamos un área libre entre el borde y el contenido
  5. Fijamos que se realice un desplazamiento en el interior cuando se sobrepasan los límites, mediante barras de desplazamiento
  6. Fijamos un color de fondo
Listado 3: Ejemplo simple de uso del atributo contenteditable con spellcheck, después de aplicarle estilos para el formateo del área de edición

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" lang="es-es">
<title>contenteditable spellcheck="true"</title>
<style>
#textBox {
width: 600px;
height: 300px;
border: 2px #000000 solid;
padding: 10px;
overflow: scroll;
background-color: yellow;
}
</style>
</head>
<body>

<section id="textBox" contenteditable="true">
<h1 style="color:red">Título</h1>
<p>Escribir aquí...</p>
</section>

</body>
</html>

Atajos del teclado y menú emergente

No hay un estándar definido de atajos de teclado, pero en todo caso podremos aprovechar los propios del navegador como los de cortar, pegar, seleccionar todo, … Otros son de uso común como los de negrilla e itálica y otros más como los de subrayado dependerán del navegador en sí.
  • Ctrl+B: Negrilla
  • Ctrl+I: Itálica
  • Ctrl+C: Copiar
  • Ctrl+V: Pegar
  • Ctrl+E: Seleccionar todo
Sí existe un menú emergente con opciones básicas, también dependen algunas del sistema operativo y del correspondiente navegador. Un ejemplo se muestra en la figura adjunta.

Ahora que conocemos todas estas cosas, estamos en condición de construir una interfaz de usuario en Javascript que nos permita asignar formato e los elementos mdiante el método execCommand.

Autor

Jaime Peña Tresancos

Escritor. Colaborador habitual de revistas de tecnología y experto en nuevas tecnologías y programas Microsoft

Compartir

Comentarios

Rigo

16/1/2015
pregunta
Luego de haber confeccionado mi editor de texto, como pudiera almacenar en la Base de Datos el textos con el estilo editados por el usuario, para que el texto se publacado otra seccion de la pagina, con estos mismo estilos??????? gracias epero respuesta

rigo

16/1/2015
Pregunta
Luego de haber confeccionado mi editor de texto, como pudiera almacenar en la Base de Datos los textos con el estilo editados por el usuario, para que el texto sea publicado en otra seccion de la pagina, con estos mismo estilos??????? gracias espero respuesta.