Requirements: Drupal 7

Modules: http://drupal.org/project/wysiwyg

This tutorial will walk you through steps on how to configure wysiwyg editor with TinyMCE. You can, of course, use TinyMCE directly but I like this option as I can use any editor (TinyMCE, TinyMCE, YUI Editor) and can change quickly to another if needed. For that, I will need to download that editor and place it in the libraries folder, configure wysiwyg profile (we will get to it soon) and new editor is ready for use.

Now that we have that out of the way, lets get down to installing and configuring wysiwyg.

Install Wysiwyg modules as per instructions.

Download TinyMCE from http://www.tinymce.com/download/download.php  and unzip it in sites/all/libraries/tinymce folder.

Go to admin/config/content/wysiwyg to configure wysiwyg. I used Full HTML input format for this tutorial because this will ensure that any HTML that we use in content is not filtered; feel free to use Filtered HTML if you want to restrict HTML tags in the content.

You will need to select an editor for this profile. Editor drop down should have ” TinyMCE  n.n” listed. If its not listed then make sure you have properly downloaded  TinyMCE  and unzipped it in sites/all/libraries/tinymce folder (not libraries/tinymce/tinymce)). If you want, you can download multiple versions and select different  TinyMCE  version for each profile (although not sure why you would need to do it but feel free).

Save changes.

This should create a profile for Full HTML with the selected  TinyMCE  version.

Click on Edit in operations column after saving  TinyMCE  version for selected profile. There are many options which are self explanatory. This uorial will only describe minimum setup needed to get this up and running. You can test any options as needed.

Expand “Buttons and Plugins”. This should show all the possible button options that Wysiwyg has to offer that you want to use; I had hoped to select all option in newest version but its not available (yet).

Expand “Cleanup and Output”. I prefer to Uun-check “Remove Line Breaks” option as it allows me to view content easily when viewing in Source Code (or HTML) mode. If this is checked then all code will appear on one line and very hard to read.

Expand “CSS”. Here you can provide path to any CSS file from your theme that you want wysiwyg editor to parse and show styles in “Styles” drop down. I, personally, create a special CSS file for styles that I want to display in styles drop down in wysiwyg editor. This way, I only see styles that I want to use in content rather than all the styles that are used through out the site (for example, menu or sidebar styles).  For this to work, you will need to select “Define CSS” in “Editor CSS” drop down. Now enter “CSS Path” to your style sheet like “%b/sites/all/themes/rattanpal/styles/wysiwyg.css” (%b is the root of your site to ensure it uses absolute to path to avoid any path issues).

That is all we need fo basic configuration of wysiwyg editor in Drupal 7. Its time to save your changes.

If you selected Full HTML like me then you will need to go admin/config/content/formats. Drag full HTML so that its first item in all 3 formats. This will ensure that Full HTML is selected by defauly when you add/edit content.