Drupal + FCKeditor

1. How to make FCKeditor (almost) WYSIWYG
2. How to configure spell checker

How to make FCKeditor (almost) WYSIWYG

When using cutom theme, sometimes it is necessary to tell FCKeditor to use the correct style.
Let's use as example the marinelli theme.

By default, it is hard to create a page with FCKeditor: background color used by site and font color are too similar and it's very hard to read anything, text is aligned to the center:

Fortunately, there is a way to tell FCKeditor to appear just like we expect.

Take a look at the source of marinelli template (you may use Firefox with Firebug to do that). The ID of main element is called "primary". The class is named "singlepage".

All we need to do is to tell FCKeditor to use that styles:

• Edit FCKeditor profile, in the "CSS section" choose use theme css
• In modules/fckeditor/fckeditor.config.js, add the following:
  

  FCKConfig.BodyId = "primary";
  FCKConfig.BodyClass = "singlepage";
  

• Now our body inside of the FCKeditor gets the right ID.
• Well we still have the wrong background and text alignment. To fix this, add another line in fckeditor.config.js:
  

  FCKConfig.EditorAreaStyles = "body{background:#FFFFFF;text-align:left;}";
  

  in newer versions of marinelli theme we may also need to adjust the font size, so if you need to, use the following code instead:
  

  FCKConfig.EditorAreaStyles = "body{background:#FFFFFF;text-align:left;font-size:0.8em}";
  

• Remember to clear your browser's cache after applying changes to javascript files.

How to configure spell checker

• Choose which spell checker do you want to use. Basically, you have two choices: ieSpell and Speller Pages. IeSpell  is quite simple and efficient, but it runs on IE/Windows only. Speller Pages is a free, Open Source, server side spell checker that uses the powerful GNU Aspell engine for the hard work.
  
  Choose one of them and in fckeditor.config.js tell FCKeditor to use it (add one of the following lines at the end of file):

  FCKConfig.SpellChecker = 'ieSpell' ;
  //or
  FCKConfig.SpellChecker = 'SpellerPages' ;
  

  More information about ieSpell and Speller Pages / Aspell installation can be found in the FCKeditor documentation.
• [Speller Pages only] After you have succesfully installed Aspell, locate the spellchecker.php (should be located here: modules\fckeditor\fckeditor\editor\dialog\fck_spellerpages\spellerpages\server-scripts\spellchecker.php) and set the $aspell_prog variable to the aspell executable. In windows it should be something like:
  

  $aspell_prog    = '"C:\Program Files\Aspell\bin\aspell.exe"';
  

  In linux:
  

  $aspell_prog    = '/usr/bin/aspell';
  

  however in some cases this setting should also work:

  $aspell_prog    = 'aspell';
  

• FCKeditor now knows which spell checker it should use, but we still need a button to be able to use it. FCKeditor toolbars for Drupal don't have by default the 'SpellCheck' button added. To enable 'SpellCheck' button, you have to add it by yourself in fckeditor.config.js (you may need to clear browser's cache to see changes).
  For example, find a line:
  

  ['Cut','Copy','Paste','PasteText','PasteWord'],

  and add SpellCheck button at the end:
  

  ['Cut','Copy','Paste','PasteText','PasteWord','SpellCheck'],

• That's all! You should be now able to use spell checker inside of FCKeditor, enjoy ;-)
• Hint for Firefox users: there is one more configuration option available. This option enables the Firefox built-in spell checker while typing. See the FirefoxSpellChecker documentation. To enable it, add

  FCKConfig.FirefoxSpellChecker = true ;

  to fckeditor.config.js

To see how FCKeditor works, add a comment on the first page.

Please use comments below only to leave your opinion and any other suggestions you might have on the subject.