Los editores de texto en Wordpress y Joomla

Para escribir un texto en un blog de Wordpress disponemos de dos editores: uno visual, que nos permite formatear el texto sin necesidad de conocer el código de HTML, y otro que incluye etiquetas de HTML con las que establecemos los formatos desde el código fuente del documento. El editor visual está activado en la sección Usuarios > Perfil > Opciones personales, y se puede desactivar su casilla para dar paso al segundo editor. Ambos tipos de editores tienen su razón de ser. El visual es obligatorio para los principiantes que no conocen el lenguaje HTML, pero resulta más cómodo de usar para todo tipo de personas. El editor con etiquetas resulta más útil para los usuarios avanzados que quieran tener un mayor control sobre el código fuente. En Joomla hay la posibilidad de elegir entre el editor visual TinyMCE y un editor sin botones ni etiquetas.

El editor visual TinyMCE

El editor utilizado por Wordpress y por muchos otros gestores de contenido es TinyMCE, un editor realmente bueno y de código abierto que se puede descargar de su web de forma gratuita. Allí se pueden ver unos ejemplos de este editor con varias configuraciones para adaptarlos a distintas necesidades. La configuración completa de este editor nos muestra muchos botones dispuestos en cuatro barras, que sirven para satisfacer todo tipo de necesidades a la hora de formatear un texto.

TinyMCE se puede utilizar con casi todos los navegadores de la Web, pero a veces da problemas porque el código de JavaScript que utiliza no es totalmente compatible. Por ejemplo, una de las opciones más importantes es la de poder usar el editor en pantalla completa, pero esto a veces no es posible en el navegador Internet Explorer, de ahí que esa opción no aparezca en muchos de los gestores de contenido que incluyen este editor. Por lo demás, hay que agradecer el esfuerzo que han realizado los creadores de este editor que, junto a algunos complementos o plug-ins que se le pueden añadir, supone el mejor editor visual que puede acompañar a un buen gestor de contenidos.

El editor de Wordpress

[Actualizado el 20.02.07]

Joomla utiliza este editor con la mayoría de sus botones, pero la configuración que de este editor presenta Wordpress es más restringida. Sin embargo, a partir de la versión 2.1, Wordpress esconde una segunda barra de botones que se abre pulsando a la vez las teclas Mayúscula + Alt + v, en la que se incluye una configuración más completa. Esta barra también aparece en la versión de Wordpress.com, que es la que se ve en esta imagen:

En las versiones anteriores, el editor tenía el siguiente aspecto:

La primera barra de botones del editor presenta dieciocho botones con los que podemos formatear el texto. Muchos de ellos son muy conocidos, porque son iguales o parecidos a los que hay en los procesadores de texto, y por ello resultan familiares. Si seguimos los botones de izquierda a derecha, Las distintas opciones de formateo del texto son las siguientes:

negritas, cursivas, tachado, lista de viñetas, lista numerada, deshacer la sangría, sangría de texto, alineación izquierda, alineación centrada, alineación derecha, enlace, quitar el enlace, insertar imagen, etiqueta <more> de Wordpress, desahacer, rehacer, ver código fuente y ayuda.

• El botón que más llama la atención por su novedad es el quinto por la derecha, el de la etiqueta <more>, que utiliza Wordpress para separar el texto que va a aparecer en la portada, pues el texto que aparece en el enlace permanente es todo, incluido el de portada.


• El botón de enlace se activa cuando hemos subrayado las palabras que lo incluyen. Si hacemos entonces clic en él, aparece una ventana de diálogo que nos permite (1) incluir la URL o dirección del enlace, (2) ver la nueva dirección en la misma ventana o abrir una nueva para ello o (3) titular el enlace para que se vea al colocar el cursor del ratón encima del enlace.


• El botón de imagen nos posibilita (1) incluir la URL o dirección de la imagen, (2) escribir una descripción de la imagen, que se vea al colocar el cursor del ratón encima del enlace o (3) alinear la imagen respecto al párrafo.


• El botón HTML nos abre el código fuente del documento, donde podemos formatear el texto con las etiquetas de HTML que queramos, pudiendo así mejorar las escasas etiquetas que incorpora la configuración que de este editor ha hecho el equipo de Wordpress.


• A parte de estos botones, el editor dispone de una opción especial muy importante: podemos poner el cursor del ratón en la esquina inferior derecha y arrastrar esa esquina para redimensionar el editor y aumentarlo oreducirlo de tamaño.

Los botones de la segunda barra son muy útiles:

• En el menú desplegable aparecen los seis títulos para encabazamientos (headings), que tienen un tamaño establecido que se reduce conforme aumenta el número. Son parecidos a los estilos de títulos de los procesadores de texto.


• También tiene la etiqueta de párrafo (paragraph), que no hace falta incluir en el texto porque el programa automáticamente formatea como párrafo un texto al pulsar la tecla Enter o Intro.


• Asimismo, están las etiquetas de texto preformateado (preformated), es decir de texto que aparecerá tal y como lo escribamos, permitiendo tabulaciones que no se pueden conseguir con el texto normal.


• Por último, la etiqueta Dirección (address) se utiliza para escribir una dirección de email, principalmente la de los autores de la página web o del blog, pero no se usa mucho.

Los demás botones de esta segunda, y nueva, barra se utilizan, siguiendo el orden de izquierda a derecha, para lo siguiente: subrayar, alineación justificada (no recomendada), color del texto, pegar como texto plano (sin formato), pegar texto de MS Word, borrar formateo, limpiar código, insertar caracteres especiales, deshacer una acción y rehacerla.

Mientras vamos escribiendo el texto es conveniente Guardar y seguir editando, como aparece en uno de los botones que se encuentra debajo del editor, o Guardar el texto para seguir más adelante su composición antes de publicarlo.

El editor de Joomla

En la configuración que tiene Joomla de este editor hay algunos botones no citados que suelen dar mucho juego:

• El icono del ancla se usa para hacer un enlace interno o marcador a otra parte del mismo documento. Con este botón escribimos el nombre de un marcador en una parte del documento adonde irá un enlace realizado con el botón de enlaces.


• El botón de la escoba se usa para limpiar el código enmarañado, lo que suele ocurrir con frecuencia cuando escribimos mucho.


• Con el botón de los prismáticos y el siguiente buscamos un texto y lo remplazamos.


• También se puede insertar la hora y la fecha, graciosos emoticonos y layers o capas, pero esto último no lo aconsejamos a menos que se sepa lo que se hace.


• En la última fila de botones tenemos algunos muy útiles como los que insertan tablas, columnas y filas. El penúltimo botón permite abrir el editor en pantalla completa. Y con el último manejamos hojas de estilos CSS.

El editor no visual de Wordpress

Para terminar este repaso, vamos a ver el editor no visual que incluye el gestor de Wordpress. Es un editor para expertos, aunque en realidad es muy sencillo de usar.

Hay catorce botones, y casi que introducen etiquetas de HTML en el marco del editor. Algunas de estas etiquetas las he puesto como ejemplo en el editor mismo, como puede verse en la imagen superior. Todas estas etiquetas se abren así: <etiqueta> y se cierran con una barra: </etiqueta>. Cuando pulsemos un botón, aparecerá la etiqueta de apertura, pero tendremos que volver a pulsar el mismo botón cuando queramos poner la etiqueta de cierre. Ahora vamos a examinar esas etiquetas según las líneas que he escrito en la imagen del editor:

1. Etiquetas de negrita y de cursiva. Son muy sencillas.


2. Enlace a Google. En el atributo href se incluye la dirección de URL entre comillas.


3. Parrafo con sangría, que se usa mucho para citas textuales de otros blogs, por ejemplo.


4. Si queremos borrar una frase escrita y publicada anteriormente, pero no la queremos quitar del texto, entonces aplicamos la etiqueta del, y se verá el texto cruzado por líneas. La etiqueta ins la usamos para introducir texto posterior a la publicación del artículo en el blog. En ambas se incluye la fecha y la hora de la modificación con el atributo datetime.


5. Etiqueta de imagen con el atributo src que incluye la URL de la imagen que vamos a publicar. El atributo alt se usa para una descripción de la imagen.


6. Lista con viñetas con la etiqueta ul. Podría ser lista numerada con la etiqueta ol. Después incluimos los ítems de las listas con la etiqueta li.


7. Para distinguir el texto que incluye código de programación (muy habitual en la web), usamos code.


8. Para dividir la introducción del cuerpo del texto usamos el código more de Wordpress, que no es una etiqueta de HTML, aunque usa los signos para comentar código de HTML.

Por último, el botón lookup abre una ventana de diálogo donde escribimos una palabra cuyo significado se busca en página Answers.com. Si hubiera alguna etiqueta sin cerrar, el botón Close Tags las cierra.

Hay que decir que una de las etiquetas más importantes, la de párrafo (p), no hace falta ponerla, porque el editor se encarga de introducirla cada vez que pulsamos la tecla ENTER para empezar un párrafo nuevo.

Ahora sólo falta ponerse a escribir. Y tener ideas, información o experiencias que contar. No es difícil, así que ¡ánimo!