David Slack - Web developer

WYSIWYG stands for 'What You See Is What You Get' and is basicly an interface for content that looks like Microsoft Word with bold, left align, Centre, etc, etc. This is great for formatting pages but can be a nightmare for security. Read on for how to set it up securely.

Modules

First install these modules (Click here for instructions on installing the module)

• WYSIWYG - http://drupal.org/project/wysiwyg
• IMCE - http://drupal.org/project/imce
• IMCE/WYSIWYG bridge - http://drupal.org/project/imce_wysiwyg

Library

Next, you need to download a library for TinyMCE (our editor of choice) which you can download here (You will need version 3)

Now put the editor on your server.

1. Create a folder called 'libraries' in example.co.uk/sites/all (if there isn't one already)
2. Add the TinyMCE folder in so you have example.co.uk/sites/all/libraries/tinymce

If you've done this right you WON'T have example.co.uk/sites/all/libraries/tinymce/tinymce. If you do end up with this then move the files down a folder. Once your done you will have:
example.co.uk/sites/all/libraries/tinymce/jscripts

Spell Check

You'll need to add the Spell checker so download it here.

1. Upload using your cPanel File manager
2. Unzip the "spellchecker" directory into "/sites/all/libraries/tinymce/jscripts/tiny_mce/plugins" so you'll have "/sites/all/libraries/tinymce/jscripts/tiny_mce/plugins/spellchecker".
3. Open up the "/public_html/sites/all/modules/wysiwyg/editors/tinymce.inc" and at about 539 find:
   {syntaxhighlighter brush: php;fontsize: 100; first-line: 1; } 'table' => array( 'path' => $editor['library path'] . '/plugins/table', 'buttons' => array('tablecontrols' => t('Table')), 'url' => 'http://wiki.moxiecode.com/index.php/TinyMCE:Plugins/table', 'internal' => TRUE, 'load' => TRUE, ),{/syntaxhighlighter}Change To
   {syntaxhighlighter brush: php;fontsize: 100; first-line: 1; } 'table' => array( 'path' => $editor['library path'] . '/plugins/table', 'buttons' => array('tablecontrols' => t('Table')), 'url' => 'http://wiki.moxiecode.com/index.php/TinyMCE:Plugins/table', 'internal' => TRUE, 'load' => TRUE, ), 'spellchecker' => array( 'path' => $editor['library path'] . '/plugins/spellchecker', 'buttons' => array('spellchecker' => t('Spellchecker')), 'url' => 'http://wiki.moxiecode.com/index.php/TinyMCE:Plugins/spellchecker', 'internal' => TRUE, 'load' => TRUE, ),{/syntaxhighlighter}
4. Save the file

Setup IMCE

Setup IMCE first as that will be incorporated into the WYSIWYG

1. Log into your site and go to the admin page
2. Click IMCE on the right
3. Under Profile name and to the right of User-1 click 'Edit'
4. Change the name of the profile to 'Admin' under Profile name
5. Set 'Maximum image resolution:' to 0 so you have no max image size
6. Under Directory path for the first row un-tick all the boxes except Browse, leave that ticked, you don't want to accidentally delete or change anything you need
7. In the second row tick all the boxes (6 of them) and in the box type
   {syntaxhighlighter brush: php;fontsize: 100; first-line: 1; }php: return 'users/'.$user->name;{/syntaxhighlighter}
8. For the dimensions type:
   • Small = 200x200
   • Medium = 400x400
   • Large = 1000x1000
9. Click the Save Configuration button at the bottom
10. Click back to 'Admin' and 'IMCE'
11. Hit 'Delete' next to Sample profile (and the Delete button)
12. On the pull-downs next to Manager and admin select 'Admin'
13. Click the Save configuration button at the bottom

We have set this up for admin only at the moment as we don't want users uploading images just yet, but we can go back later and add more profiles if we need to. By the way, the file browser doesn't just upload images, you can upload pdfs, zips, video whatever.

Now if you click 'My account' on the left you have a new option for 'File Browser' where you can upload, delete, edit and resize images. These can then be added through you WYSIWYG editor which we'll set up next.

WYSIWYG editor 

1. Go to your admin page
2. Click Wysiwyg profiles on the right
3. You should see 3 Input formats, If not you'll have to go back and check your 'libraries' folder. Usually TinyMCE has not uploaded fully.
4. Next to Filtered HTML and Full HTML select TinyMCE 3.x (leave PHP code with none) and hit the Save button
5. Hit 'Edit' next to Filtered HTML

There are a lot of settings in here and they can cause problems if set up wrong. For instance we will set this up for a basic user and if you allow them to 'disable rich text' it is possible they could write some CSS that could break the page. So:

1. Open up 'Basic setup' by clicking it once
2. Tick the first box, leave the second 2 unticked
3. Open up 'Buttons and plugins' by clicking it once
4. These are all the buttons that we want to show to users, at this point we don't want to give them too much control ;) Select (tick) these:
   • Bold
   • Italic
   • Bullet list
   • Numbered list
   • Link
   • Unlink
   • Remove format
   • Emotions
   • Inline popups
   • Spellchecker
5. Open up Cleanup and output' by clicking it once
6. Select (tick) 'Apply source formatting' and 'Force cleanup on standard paste' (leave others ticked)
7. Click the Save button

Now we will do the same for Full HTML. Click 'Edit' next to it

1. Open up 'Buttons and plugins' by clicking it once
2. Select these:
   •  Bold
   •  Italic
   •  Strike-through
   •  Align left
   •  Align center
   •  Align right
   •  Justify
   •  Bullet list
   •  Numbered list
   •  Outdent
   •  Indent
   •  Link
   •  Unlink
   •  Anchor
   •  Image
   •  Clean-up
   •  Superscript
   •  Subscript
   •  Source code
   •  Character map
   •  Advanced image
   •  Advanced link
   •  HTML block format
   •  Fullscreen
   •  Inline popups
   •  Media
   •  HTML attributes
   •  Advanced list
   •  Word count
   •  IMCE
   •  Teaser break
   •  Spellchecker
3. Open up 'Cleanup and output' by clicking it once
4. Select 'Preformatted' only, untick all else
5. Hit the save button

Using the editor

Now you have WYSIWYG all installed but how to use it? Well, every time you create or edit new content you will find the WYSIWYG editor. If you see the buttons of the editor you will notice not all of them are there, but under the editor you will see 'Input format' and if you change to Full HTML you'll get all buttons and if you change to Filtered HTML you'll get some of the buttons.

Filters

We'll use the Filtered for users and the Full for Admin. To do this:

1. Open up your website, login and go to Admin
2. Click 'Input Formats' on the right
3. Select 'Configure' next to Full HTML
4. Select Admin and Manager
5. Click the Save Configuration button
6. Next to PHP Code click 'Configure'
7. This is VERY dangerous if allowed to all uses and some developers disable this completely. It means you can run php scripts within pages but you only want Admin to use it so select Admin only
8. Click the Save Configuration button

Using IMCE

When creating cintent on the Full HTML Input format there is an image of a tree, this is for images. If you click this a small window will open. If you look next to Image URL there is a small button click this and another window will open, this is IMCE and if you click on the folder on the left of your username you can start to upload images and files and do all sorts of things.

Spend some time with it, there are a few options and things to play with.

That's WYSIWYG, once you've installed it once you can install it again in about 5-10 mins (including uploading everything, it just takes a while the first time.