Este módulo permite usar diferentes editores Wysiwyg, es decir editores del lado del cliente que ayudan a que la persona que está cambiando el contenido vea la información de la misma forma que quedará cuando finalmente sea publicada.

El término Wysiwyg es un acrónimo que proviene de la frase "What You See Is What You Get", que se podría traducir en algo como "Lo que ves es lo que obtienes".

La integración con los diferentes editores es bastante sencilla. Usualmente basta con bajar el proyecto desde la página original del mismo y colocarlo en una carpeta.

INSTALACIÓN

Para instalar este módulo se requiere seguir los pasos de instalación de módulos drupal.

En el área administrativa de instalación de módulos, este módulo aparece en una sección llamada Taxonomía.

Seleccionamos el módulo y apretamos el botón Guardar Configuración.

Una vez que hemos instalado el módulo, podemos configurarlo dirigiéndonos a

  Administrar->Configuración del Sitio->Wysiwyg

Al ingresar a este enlace encontraremos una página que tiene una sección llamada Instlalation Instructions que contiene una lista de todos los editores soportados. Cada editor tiene el nombre del editor, un enlace que dice Download para que nos lleve a la página de descarga de dicho editor y instrucciones de como debemos instalarlo, que basicamente consiste en colocar los archivos descargados en la ubicación que nos indica.

Los editores soportados son los siguientes:

• markltUp
• NicEdit
• jWYSIWYG
• TinyMCE
• openWYSIWYG
• FCKEditor
• Whizzywig
• YUI Editor

Seleccionamos el editor de nuestra preferencia, descargamos los archivos correspondientes, lo colocamos en la carpeta indicada y procedemos a configurarlo. A continuación, el proceso seguido para algunos de los editores.

Este módulo nos permite tener varios editores Wysiwyg instalados y escoger uno distinto por cada formato de entrada que tengamos disponibles. De manera que podríamos instalar más de un editor Wysiwig, y usar cada uno de acuerdo a nuestra conveniencia.

TinyMCE

Para habilitar el soporte para TinyMCE nos dirigimos a la sección de descargas de la página del proyecto. Si estamos en la página, y no estamos en la sección de descargas, podemos llegar a la misma a través del enlace que aparece al lado derecho.

En la sección de descargas podremos observar que hay varias opciones para descargar..

Podemos escoger la opción Main Package, que contiene todo lo necesario para que tinyMCE funcione en un sitio en producción, o también la versión jQuery package, que permite una integración con jquery.

Bajamos el tinyMCE y lo colocamos, descomprimido, en la carpeta sites/all/libraries/tinymce de nuestra instalación de drupal. Si no existe la carpeta libraries, la creamos. La biblioteca javascript quedará en sites/all/libraries/tinymce/jscripts/tiny_mce/tiny_mce.js, tal como indican las instrucciones del Wysiwyg.

Refrescamos la página de nuestro navegador. Y veremos que en la parte superior aparece la opción de seleccionar el editor para cada uno de los formatos de entrada que tengamos disponibles, tal como muestra la siguiente figura.

Es decir, ahora que ya tenemos un editor (el tinyMCE) instalado, podemos asignar este editor (y si tuvieramos otros también) a cada uno de los formatos de entrada disponibles. También podemos crear un formato de entrada personalizado para que use el editor que seleccionemos.

En la sección Installation Instructions, podemos ver que también seha producido un cambio (si está sección está colapsada, podemos presionar en la misma para ver su contenido). Ahora el editor TinyMCE aparece con una marca, que indica que está instalado en color verde, y hacia la derecha un número que nos indica la versión que hemos instalado. Por otra parte ya no aparecen las instrucciones para instalación como en los otros editores.

Procedemos a seleccionar el editor para el formato de entrada que vamos a utilizar y presionamos el botón Guardar. Veremos que en la columna operaciones, aparecerá un nuevo enlace (Editar) que no existía previamente.

(TODO: Imagen representativa)

Para configurar los controles botones que van a aparecer presionamos el enlace.

CONFIGURACIÓN

BOTONES Y PLUGINS

Teaser Break.- Este boton es de mucha importancia, ya que permite que el editor pueda seleccionar donde se cortará el resumen de los contenidos, por ejemplo cuando se vean en un listado. De esta manera podrá controlar tanto la longitud de los mismos, pero también podrá prevenir que el corte se realice por el número de caracteres lo que puede ocasionar que se haga en medio de una etiqueta html, generando que la estructura html no esté completa, lo que puede romper la apariencia de la página.

Para activar este botón solo marque la casilla de verificación del mismo.

Cuando se use el edtor aparecerá un nuevo botón, con dos rectángulos separados entre sí, tal como se muestra en la figura

(TODO: captura de pantalla)

Al presionar en este botón aparecerá un área que ocupa el ancho del editor con la siguiente inscripción <!--break--> que indica que en ese punto se cortará la página. Si presionamos varias veces, aparecerá varias veces, pero solo se tomará la primera (TODO: comprobar esta afirmación). Si queremos borrar un corte de página, solamente lo seleccionamos y presionamos la tecla DEL (o Supr).

APARIENCIA DEL EDITOR

INSTALAR LA TRADUCCIÓN AL ESPAÑOL

Para instalar la traducción al idioma español seguimos los siguientes pasos:

• Bajamos el archivo de traducción desde la página de TinyMCE.
• Descomprimimos el paquete en el directorio raíz de nuestra instalación TinyMCE

Primero, bajamos el paquete de idioma español, desde la siguiente dirección:

http://tinymce.moxiecode.com/download_i18n.php

Marcamos la casilla de verificación de español (Spanish; Castilian) y presionamos el botón Dowload. 

(TODO: Agregar imagen representativa)

CUIDADO: Presionar sobre el enlace XML al costado del idioma no descargará el paquete complet, solo el archivo XML, por lo cual recomendamos seguir los pasos explicados anteriormente.

Segundo, descomprimimos el paquete en el directorio raíz de nuestra instalación TinyMCE, es decir, partiendo de drupal, en la carpeta sites/all/libraries/tinymce/jscripts/tiny_mce.

 Tercero, cambiamos la configuración en Drupal, para ello nos dirigimos a Configuración del Sitio > Wysiwyg y editamos el formato de entrada al que le vamos a cambiar el idioma. Escogemos Basic Setup, y en idioma, escogemos es (español) o el lenguaje que deseemos.

FCKEditor

El proceso es muy similar al de utilizar tinyMCE.

SOPORTE E INTEGRACIÓN PARA EL MANEJO DE IMAGENES

Para integrar el manejo de imagenes con los editores Wysiwyg tenemos dos opciones.

Una de ellas es usar el módulo IMCE junto con el módulo IMCE Wysiwyg bridge.

La otra es usar el módulo Image Assist.