Esta presentación muestra como instalar WYSIWYG en Drupal 7.

1. Instalación de WYSIWYG
en Drupal 7
Cristian Mamani
xjkwak@gmail.com
Diciembre - 2012

2. Acerca de Cristian Mamani
Trabajo
Drupal developer en
Comunidad
Miembro activo de la comunidad Drupal Bolivia
Contacto
@xjkwak en Facebook y Twitter
Web
http://eldrupalero.com

3. WYSIWYG
 WYSIWYG es el acrónimo de What You See Is
What You Get (lo que ves es lo que obtienes)
 Este módulo permite agregar Editores
WYSIWYG que facilitan la introducción de
contenido con texto enriquecido en un área de
texto.
 Los editores de texto enriquecido permiten
agregar imágenes, texto, estilos sin necesidad
de tener que escribir HTML

4. Instalación de WYSIWYG

Lo descargas de
http://drupal.org/project/wysiwyg

Y como cualquier otro módulo contribuido lo
descomprimes y lo colocas en la carpeta
sites/all/modules de tu sitio Drupal.

No tiene dependencias de otros módulos.

5. Perfiles de WYSIWYG (I)

Un perfil WYSIWYG está asociado a un Formato de
Entrada.

Un perfil WYSIWYG define:
− El Editor que se mostrará con un particular Formato de
Entrada.
− Los botones y temas que estarán habilitados para el
Editor.
− Forma de presentación del Editor

Para poder configurar un Perfil de WYSIWYG es
necesario tener instalado antes la librería de un
Editor.

6. Perfiles de WYSIWYG (II)

admin/config/content/wysiwyg
Lista de todas
las librerías de
Editor que por
defecto soporta
WYSIWYG. Se
muestra un
mensaje que
indica que no se
tiene instalado.

7. Editores WYSIWYG
 WYSIWYG se integra por defecto con alguno de
estos:
− jWYSIWYG (http://code.google.com/p/jwysiwyg/)
− CKEditor (http://ckeditor.com/)
− WYMEditor (http://www.wymeditor.org/)
− YUIEditor (http://developer.yahoo.com/yui/editor/)
− Whizzywig (http://www.unverse.net/)
− Nic (http://nicedit.com/)
− openWYSIWYG (http://www.openwebware.com/)
− TinyMCE (http://tinymce.moxiecode.com/)
− FCKEditor (http://www.fckeditor.net/)
− MarItUp (http://markitup.jaysalvat.com/)

8. Instalando un Editor
 Para instalar un editor de los que son
soportados por WYSIWYG, debemos
descargarlo, descomprimirlo y ubicarlo en
sites/all/libraries/[editor]
 La página de perfiles de WYSIWYG provee
información de instalación para cada Editor. Ej:

9. Instalando TinyMCE Editor (I)

Editor de texto enriquecido TinyMCE

10. Instalando TinyMCE Editor (II)
 Descargarlo, descomprimirlo y ubicarlo en
sites/all/libraries/tinymce de tal manera
que el archivo principal sea encontrado en
sites/all/libraries/tinymce/jscripts/tiny_mce/tiny_mce.js
 Volver a la página de perfiles para relacionar un
formato de entrada con el Editor TinyMCE.
 Lo siguiente es activar los botones y plugins.

11. Configurar el TinyMCE Editor

Algo principal será activar los botones que van
a mostrarse en el Editor, los mismos que deben
estar en relación con el Formato de Entrada.
Ej: Si queremos poder añadir imágenes en el
editor, además de activar el botón 'Imagen' el
Formato de Entrada deberá soportar la etiqueta
<img>

12. Viendo el TinyMCE en acción

Finalmente para poder ver el Editor TinyMCE,
debemos verlo en un campo que tenga el
Formato de Entrada al cual se le asoció el
Editor.

13. Gracias