Drupal 7: How to install and configure WYSIWYG

Part 1: Initial install/configuration

1. Download WYSIWYG dev version https://www.drupal.org/project/wysiwyg
2. If you're not using drush, extract WYSIWYG folder to

   sites\all\modules\
   

3. Enable the module
4. Go to site configuration and click on WYSIWYG profiles
5. Download CKeditor http://ckeditor.com/download
6. Extract contents to sites

   /all/libraries/ckeditor

7. Refresh WYSIWYG profiles page
8. Choose where u want editor to show up
9. Click "edit" to choose buttons you want to show
10. You can choose "Media Browser"*

*To enable Media Browser, you need to first enable the module "Media WYSIWYG View Mode", then go to configuration>text formats>configure and then enable "Convert Media tags to markup"

Part 2: Font configuration

1. Go to

   admin/config/content/wysiwyg

2. Under CSS tab, choose Define CSS
3. As CSS path, add "/sites/all/themes/name-of-theme/css/your-custom.css" (without parenthesis)
4. Add custom css in your custom css file

Important: please use unique CSS classes for these fields (so it doesn't affect any other elements in the site)

Image captions (optional)

1. _To add image captions, please install the following module: https://www.drupal.org/project/image_caption
2. If not using drush, copy the image_caption folder to your Drupal modules folder
3. Add the empty css definition .caption{} to the stylesheet used by the WYSIWYG editor and to the theme's stylesheet (front-end)
4. Add it to the theme's style.css to get it to appear in the class dropdown box in your WYSIWYG editor.
5. Enable the Image Caption module in Drupal module administration.
6. After install, select the node types to include in image caption processing under Site Configuration > Image Caption*_