Drupal WYSIWYG editor Setup w/ Google Spellcheck

The WYSIWYG API module allows to users of your drupal site to use many different WYSIWYG (What You See Is What You Get) Web browser based editors for editing content. This module is the up and coming WYSIWYG module and has overtaken other modules of this type. This module depends on other modules and third-party editor libraries (often based on JavaScript). Libraries like SpellCheck or modules like IMCE Wysiwyg bridge and Insert. Follows is my generic set up for WYSIWYG editor Setup using TinyMCE and Spellcheck including adding additional input formats:

  1. read the wysiwyg/README.txt
  2. read the wysiwyg_spellcheck/INSTALL.txt
  3. Install Wysiwyg API module
  4. Install Wysiwyg SpellCheck module
  5. Install the TinyMCE editor: Administer > Site configuration > Wysiwyg (follow the displayed installation instructions, note instructions on folder names)
    • TinyMCE, works w/ IMCE and Image Assist & has lots of config options
      • my current favorite, (integrates with everything, inc. Google spellchecking!)
      • tinymce.moxiecode.com
      • last tested Version: 3.3
      • Extract the archive and copy its contents into a new folder in the following location: sites/all/libraries/tinymce
      • So the actual library can be found at: sites/all/libraries/tinymce/jscripts/tiny_mce/tiny_mce.js
  6. Install TinyMCE spellchecker plugin
    • download TinyMCE "PHP Spellchecker" plugin from http://tinymce.moxiecode.com/download.php moxiecode
      • extract to sites/all/libraries/tinymce/jscripts/tiny_mce/plugins/spellchecker/
    • Edit wysiwyg_spellcheck/tinymce/spellchecker/config.php
      • Uncomment one of the lines that select which spellchecker to use, defaults using Google spellchecker.
    • modify sites/all/modules/wysiwyg/editors/tinymce.inc as per: http://drupal.org/node/287321#comment-2214926
    • Configure WYSIWYG profiles to show TinyMCE spellcheck button
      • Verify that TinyMCE shows the new button, and highlights misspelled words
  7. Create additional User Roles you may need: Home › Administer › User management
    • ie. "Site Editor" or "Client Editor"
  8. Configure: Administer > Site configuration > Input formats
    • add a new input format (ie "HTML editor"), assign it to trusted roles
      • disable "HTML filter", "Line break converter", and (optionally) "URL filter".
    • if you want an editor for "simple HTML" then also add a new input format (ie "Simple editor"), for the public
      • keep "HTML filter" ON.
  9. Setup editor profiles: Home > Administer > Site configuration > Wysiwyg profiles.
    • select an Editor for the Input format
    • Edit TinyMCE profile to add whatever buttons you need for your uses (spellcheck, safari, paste, paste from word)
    • note: different fields can have different profiles (ie. "simple editor" and "HTML editor")

Notable Notes

Comments

very thorough post. I have tried a wysiwyg editor for clients on a few occasions and always seem to end up with something that is wysiUgly. I am going to give this a try, since I think I already see where I went wrong before.

as noted by another user >>
"You can have the wysiwig editor use your style sheet when editing for a true wysiwyg experience, by setting the path to your stylesheet in the wysiwig setup. ...you can wildcard all created css files with this path: %b%t/../files/css_injector_*.css"

I have read a lots more articles on FCKEditor v/s CKEditor but i would say we have received lots of user requests asking for the CKEditor module. CKEditor is the next version of FCKeditor. Just wanted to let you know that the first stable release of the CKEditor module is now available, it is very similar to the 6.x-2.x version of the FCKeditor module.