Atributo ContentEditable del HTML
Categorías : JavaScript, HTML, Programación.
El atributo ContentEditable convierte cualquier etiqueta en una región editable con texto enriquecido, esto quiere decir que podemos convertir una etiqueta en un TEXTAREA, que además permite cosas como el texto en negrita, cursiva, etc.. sin mucho esfuerzo.
Este atributo existe desde hace varios años y es quizás una de las pocas innovaciones introducidas por la gente de microsoft en el mundo del HTML, pero hasta hace relativamente poco no se había visto gran cosa sobre ella.
En esencia una etiqueta con este atributo activado se convierte en un editor WYSIWYG (What-You-See-Is-What-You-Get), con una funcionabilidad básica, que mediante javascript puede ser extendida hasta el punto de llegar a convertirse en un editor para cualquier tipo de tarea, que no tenga nada que envidiar a un editor convencional compilado para windows / linux / mac, con la diferencia de que este será compatible con los navegadores actuales, y por lo tanto será multiplataforma.
En este articulo veremos un poco por encima como podemos llegar a crear un editor con capacidades básicas para poner el texto en negrita.
Convertir un objeto en editable
Para empezar veamos un ejemplo sencillo de cómo convertir una etiqueta 'p' en una región editable :
<p ContentEditable='true'>Mi contenido editable.</p>
Como podéis observar en el anterior ejemplo basta con asignar el atributo ContentEditable a 'true', en el caso de que queramos desactivar la edición dentro de esta etiqueta, debemos cambiar el valor del atributo ContentEditable a 'false'.
Ahora vamos a entrar en contacto y probaremos un poco por encima las capacidades básicas de una etiqueta con el contenido editable, a continuación os dejo un DIV editable, y me gustaría que probarais la negrita (Control+B), cursiva (Control+I), e incluso a copiar texto de esta misma página y pegarlo dentro.
Para probarlo bien me interesaría que seleccionéis una palabra y pulséis Control+B, luego me interesaría que vayáis al final del texto y pulséis Control+B para seguir escribiendo, ya que de esta forma veréis que el comportamiento es distinto cuando tenemos algo seleccionado. Otra cosa que me gustaría que vierais es que al copiar y pegar (Control+C, Control+V) podemos incluso copiar una parte de la web (incluyendo imagenes, tablas, etc..) y estas se pegaran tal cual.
Ahora que ya habéis visto por encima el comportamiento de una etiqueta con contenido editable, pensad que todo lo que hacemos dentro de esta etiqueta (texto en negrita, cursiva, etc..) se hace a nivel de HTML internamente, es decir cuando ponemos a negrita una palabra el navegador lo que hace es poner la etiqueta 'b' al principio y al final de la palabra. Pero ojo que cada navegador lo hace a su forma, igual uno le pone la etiqueta 'b' y otro le pone la etiqueta 'strong' o otro incluso le pone el atributo 'style' y define el negrita dentro de él.
En definitiva cada navegador trata internamente el contenido editable a su manera, de forma que el aspecto final quede igual que en otros navegadores.
Pasemos a ver algo de código javascript, empezaremos por como activar / desactivar el contenido editable dentro de una etiqueta :
// Activa el contenido editable en el objeto que tiene la ID : MiObjetoEditabledocument.getElementById('MiObjetoEditable').setAttribute('ContentEditable', 'true');// Desactiva el contenido editable en el objeto que tiene la ID : MiObjetoEditabledocument.getElementById('MiObjetoEditable').setAttribute('ContentEditable', 'false');
En este ejemplo tenemos un objeto con la ID 'MiObjetoEditable' al que le editamos el valor del atributo 'ContentEditable' a 'true' para que sea editable, o a 'false' para que no lo sea.
Bueno ahora toca entrar a tocar por encima la función 'document.execCommand', que nos permite controlar varios aspectos del contenido editable.
Antes de nada debo decir que me parece un enfoque incorrecto que se llame al objeto 'document' para ejecutar un comando dentro de la región editable, ya que podemos tener varias regiones editables y esto nos puede causar más de un lio. Todos los sistemas operativos están diseñados para responder a un único teclado, y por lo tanto cuando pulsamos una tecla, esta va a parar a una única ventana que es la que tiene el foco.
Como ya he dicho esto puede ser un follón, ya que podemos tener 20 regiones editables y puede que ninguna tenga el foco activo, por lo que si creamos un botón que llame a 'document.execCommand', si ninguna ventana tiene el foco nunca podremos estar seguros de que ventana/objeto recibe el comando si es que lo recibe.
Para ver más claro este problema, vamos a imaginar que tenemos 2 regiones editables, y que cada una tiene un botón para poner el texto en negrita. Yo puedo estar editando el texto en la primera región editable, y pulsar el botón negrita de la segunda región editable, y como el botón llama a 'document.execCommand' y esta función no especifica ningún objeto en concreto, se nos activaría la negrita en la primera región editable.
Si os digo la verdad no tengo muy clara la solución, yo lo que intentaría en ese caso es determinar qué región tiene el foco, y actuar en consecuencia, pero estoy hablando en teoría. En cambio si hubieran diseñado la función 'execCommand' de forma que formara parte de cualquier objeto este problema no lo tendríamos, pero por desgracia esta función solo existe en el objeto 'document'.
Ahora que ya conocéis mi opinión sobre el mal enfoque de esta función veamos cómo utilizarla y algunos de los comandos que podemos usar en ella :
document.execCommand(Comando, Interface, Valor);
Comandos
Existen varios comandos pero a día de hoy no he encontrado ninguna referencia fiable de cuales están totalmente soportados en todos los navegadores actuales, por lo que solo mostrare unos cuantos :
Comando |
Descripción |
Ejemplo |
|---|---|---|
| bold | Activar / desactivar negrita (Control + B). | document.execCommand('bold', false, null); |
| copy | Copiar la selección al portapapeles (Control + C). | document.execCommand('copy', false, null); |
| cut | Cortar la selección al portapapeles (Control + X). | document.execCommand('cut', false, null); |
| italic | Activar / desactivar cursiva (Control + I). | document.execCommand('italic', false, null); |
| paste | Pegar desde el portapapeles (Control + V). | document.execCommand('paste', false, null); |
| redo | Re-hacer (Control + Y). | document.execCommand('redo', false, null); |
| strikethrough | Activar / desactivar el tachado de texto. | document.execCommand('strikethrough', false, null); |
| underline | Activar / desactivar el sub-rayado de texto (Control + U). | document.execCommand('underline', false, null); |
| undo | Des-hacer (Control + Z). | document.execCommand('undo', false, null); |
Por último y terminando con este articulo debéis saber que existen librerías para controlar objetos con el contenido editable, y algunas para que negarlo son verdaderas maravillas, por ejemplo las que más me han gustado son CodeMirror y YUIlibrary.
En especial utilizo CodeMirror para mi sección 'Laboratorio de pruebas' ya que esta librería está diseñada para escribir código, y admite una gran cantidad de lenguajes.
En lo referente a YUIlibrary es una librería inmensa que viene de la gente de yahoo y que es capaz de convertir un navegador en una suite ofimática.
Y esto es todo por hoy, como siempre podeis ver el ejemplo online o descargar el ejemplo.
| Ver Ejemplo | Descargar Ejemplo |