Enabling Spellcheck in SugarCRM's WYSIWYG Editor (TinyMCE)

Recently I started noticing a lot of spelling mistakes and typos in our KB Articles. To my surprise I found that the built in spellchecking support that nearly every modern browser has wasn’t working inside the WYSIWYG Editor (the editor used when composing emails/KB Articles). Here’s a guide on how I installed the spellchecker plugin for TinyMCE. It takes about 5 minutes to do. I did this with version 6.4.1 pro but should work in others.

1. Download the spellchecker plugin from: http://www.tinymce.com/download/download.php (at time of writing it was v2.0.6)
2. Extract the contents to  /sugarcrm/include/javascript/tiny_mce/plugins/spellchecker. Probably a good idea to backup the existing files first.
3. Open /include/SugarTinyMCE.php and modify:

   // Put "spellchecker" in the buttons configs.  Note: putting it at the end of list didn't work on the email ui (no idea why/didn't care to find out why) so I put it before styleselect (and also added a seperator)
   var $buttonConfigs = array(
   	'default' => array(
   				'buttonConfig' => "code,help,separator,bold,italic,underline,strikethrough,separator,justifyleft,justifycenter,justifyright,
   									justifyfull,separator,forecolor,backcolor,separator,styleselect,formatselect,fontselect,fontsizeselect,", 
   				'buttonConfig2' => "cut,copy,paste,pastetext,pasteword,selectall,separator,search,replace,separator,bullist,numlist,separator,outdent,
   									indent,separator,ltr,rtl,separator,undo,redo,separator, link,unlink,anchor,image,separator,sub,sup,separator,charmap,
   									visualaid", 
   				'buttonConfig3' => "tablecontrols,separator,advhr,hr,removeformat,separator,insertdate,inserttime,separator,preview,spellchecker"),
   	'email_compose' => array(
   				'buttonConfig' => "code,help,separator,bold,italic,underline,strikethrough,separator,bullist,numlist,separator,justifyleft,justifycenter,justifyright,
   									justifyfull,separator,forecolor,backcolor,separator,spellchecker,seperator,styleselect,formatselect,fontselect,fontsizeselect", 
   				'buttonConfig2' => "", 
   				'buttonConfig3' => ""),
   	'email_compose_light' => array(
   				'buttonConfig' => "code,help,separator,bold,italic,underline,strikethrough,separator,bullist,numlist,separator,justifyleft,justifycenter,justifyright,
   									justifyfull,separator,forecolor,backcolor,separator,spellchecker,seperator,styleselect,formatselect,fontselect,fontsizeselect", 
   				'buttonConfig2' => "", 
   				'buttonConfig3' => ""),
   );
   // Add spellchecker to list of plugins
   var $pluginsConfig = array(
   	'email_compose_light' => 'insertdatetime,paste,directionality,safari,spellchecker',
   	'email_compose' => 'advhr,insertdatetime,table,preview,paste,searchreplace,directionality,fullpage,spellchecker',
   );	
   // Add spellchecker to list of plugins
   var $defaultConfig = array(
   		//... other elements of array not shown
   	'plugins' => 'advhr,insertdatetime,table,preview,paste,searchreplace,directionality,spellchecker',
   

4. At this point, you should now see a spellcheck icon in your editor. If you click on it you will probably get a 403 error. I got around this by making a modification to the .htaccess file in the root of my sugarcrm folder. You must allow access to: /include/javascript/tiny_mce/plugins/spellchecker/rpc.php

   # Replace the line below...
   RedirectMatch 403 /+(soap|cache|xtemplate|data|examples|include|log4php|metadata|modules)/+.*\.(php|tpl)
   # With this version:
   RedirectMatch 403 /+(soap|cache|xtemplate|data|examples|include|log4php|metadata|modules)/+((?!rpc).)*\.(php|tpl)
   

   If you don’t have this file or use IIS, I’m not sure what the equivalent method for restricting access is.

Here’s the result:

Unfortunately, you do have to press the spellcheck button.  You don’t get automatic red highlighting like you do in wordprocessors or gmail :/

Please note that this change is NOT UPGRADE SAFE so you may have to redo these changes after you upgrade. I just now noticed that there appears to be a way to make it upgrade safe by adding files to ‘custom/include/tinyButtonConfig.php’ and ‘custom/include/tinyMCEDefaultConfig.php’; If you try it out and it works, please add a comment.

UPDATE: Revised code 3/21/2012: Original post didn’t add the buttons to Email UI.

Comments

[adam]

its never a bad idea to credit the writer of the post that your copying and pasting from.