Enabling Spellcheck in SugarCRM's WYSIWYG Editor (TinyMCE)

sugarcrmdevelopers —  April 10, 2012 — 11 Comments

Editor’s Note: This comes from the blog of Blake Robertson, who is an active Sugar Community member and CTO of Sugar customer Alertus Technologies. In this article, he talks about how to enable spellchecking with the TinyMCE editor. If you like this feature, definitely let Blake know so he can submit it to us to include in a future version of Sugar.

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.

  • Download the spellchecker plugin from: http://www.tinymce.com/download/download.php (at time of writing it was v2.0.6)
  • Extract the contents to  /sugarcrm/include/javascript/tiny_mce/plugins/spellchecker.  Probably a good idea to backup the existing files first.
  • 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',

  • 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.

11 responses to Enabling Spellcheck in SugarCRM's WYSIWYG Editor (TinyMCE)

  1. 

    I’ve been holding back on doing a pull request because my change required making changes to the .htaccess file which is apache webserver dependent.  The repo on github doesn’t have the .htaccess file perhaps because that’s only in the pro version?  What’s the sugar way of allowing rpc.php?

  2. 

    TinyMCE disables the right click mouse button as they use it for their own thing.
    Toggling to the “plain text” option helps, but is a pain and adds the potential inconsistent text. Besides the plain text feature is inconsistently implemented anyways.

    TinyMCE does have the option to turn on the browsers checking and underlining features:
    tinyMCE.init({
            gecko_spellcheck : true});

    NOTE: if “gecko_spellcheck : true” is the last one on the list then just make sure that the item before it has a comma at the end and if it is the first one in the list of options, then make sure you add a comma after “true”, like this: “gecko_spellcheck : true,”.

    OR

    you can implament it with JQuery:
    JQuery $(‘.textarea_className’).attr(‘spellcheck’,true);

    This at least alerts of a spelling mistake.
    You will, however, still have to implement the suggestion above to get spelling suggestions.

    I love suggested idea, but I think the idea is complete if you add the automatic “gecko_spellcheck : true” spell check function to it as well.

    An added bonus is that there is bound to be better and more support for different languages, dictionaries and custom dictionaries.

    For example:
    TinyMCE supports English, but as far as I know there is no way right out of the box to select British / US English variants — both variants are automatically approved (if included [like colour and color]). Words like virtualization or  “Folic” as in Folic Acid are not included, nor can they be added natively. This is what the customer needs. The customer is a lot more apt to have the dictionaries that they need and other custom dictionaries available to them on their browser. Also, these browser dictionaries are more likely to get updated (automatically or otherwise) and gives one less thing to update. I am not sure how TinyMCE supports or updates their language dictionaries.

    The question then is what is the best implementation for this:
    – config_override.php
    – some type of Hook
    – JQuery
    – hard-code the change
    – a place on the admin page to edit what features are available with TinyMCE (would like this at different times)

    Any suggestions as to the best way to implement this?

    • 

      Ugh… I wanted built in browser support instead.  That would have been sooo much easier / saved me so much time.  

      I got your suggestion working by simply adding; 
      ‘gecko_spellcheck’ => true,

      to the default_config array in /include/SugarTinyMCE.php  

      I’ll update my blog article. I suppose the procedure above is still useful for IE users?

      GOOD WORK Kirk!

      • 

        Did yours work for the regular email module?

        I though that would be the quickest way to implement it, but when I did it did not work when I clicked email then compose, so I figured it was something else.

        When I saw that yours worked I went back and looked at a campaign email I realized that it did in fact work, but not for regular email.

        • 

          Doesn’t work for me either. Adding ‘gecko_spellcheck’ => true, to the defaultConfig variable in /include/SugarTinyMCE.php made no difference to the behavior of the browser. I could still manually enable spell checking via right click in firefox but could get spell check to work in chrome.

  3. 

     I looked into things a little bit more on the code side and this is what I found

    TinyMCE (WYSIWYG & Spell checker)
    Some off-spec implementations exist that cause some problems.
      
    – Mozilla and sugar do not seem to see eye to eye on the way that the textarea element is implemented for the body of the email; therefore, Mozilla is not recognizing that it should automatically check this field (standard), but instead Mozilla needs to be told to check it (just as it would other fields)
      – There are trailing commas “,” in may of the configuration lines. This is a known source of problems for TinyMCE.
      – Also there are certain components that need to be called before others in the configuration of TinyMCE or problems can/will occur. This is also an issue.
      – the safari plugin is Obsolete and no longer used in TinyMCE
      – some plugins were called, but not used
      – some plugins were used, but not called
      – some buttons were called, but not used
      – some buttons were not setup or configured
      – some features were not configured

    Change: SugarTinyMCE.php

    sudo vi /opt/bitnami/apps/sugarcrm/htdocs/include/SugarTinyMCE.php

    // A Better Implementation of what Sugar has already installed for plugins
    // The best implementation (without paying for some of TinyMCE’s extra features or adding code)
    // Can use basic implementation as they are all included and setup in sugar

    // Within the SugarTinyMCE class update to the following:

    // For var $defaultConfig
    // The order that the default config loads in does have some dependancies. It needs to be more like

    this
        var $defaultConfig = array(
             ‘gecko_spellcheck’ => true,
            ‘mode’ => ‘exact’,
            ‘theme’ => ‘advanced’,
            ‘plugins’ =>

    ‘style,paste,advlink,directionality,preview,print,visualchars,pagebreak,template,layer,media,advimag

    e,advhr,xhtmlxtras,insertdatetime,spellchecker,table’,
            ‘theme_advanced_buttons1’ => “”,
            ‘theme_advanced_buttons2’ => “”,
            ‘theme_advanced_buttons3’ => “”,
            ‘theme_advanced_toolbar_location’ => “top”,
            ‘theme_advanced_toolbar_align’ => “left”,
            ‘extended_valid_elements’ => ‘style,hr[class|width|size|noshade],@[class|style]’,
            ‘height’ => 300,
            ‘width’ => ‘100%’,
            ‘language’ => ‘en’,
            ‘convert_urls’ => false,
            ‘strict_loading_mode’ => true,
            ‘elements’ => ”,
            ‘content_css’ =>

    ‘include/javascript/tiny_mce/themes/advanced/skins/default/content.css’,
        );

        var $pluginsConfig = array(
            ’email_compose’ => ‘paste,table,directionality,advhr’,
            ’email_compose_light’ => ‘paste,table,directionality,advhr’,
        );
       

    // the “|” instead of “separator” implumentation,unless there is a something within sugar that I do

    not know, works fine. One way or the other it is easily fixed
    // trailing commas have been removed – cause issues
    // plugins and buttons have been cleaned up

        var $buttonConfigs = array(
            ‘default’ => array(
                    ‘buttonConfig’ => “cut,copy,paste,pastetext,pasteword,selectall,|,link,unlink,|,forecolor,backcolor,|,fontsizeselect,fontselect,formatselect,|,ltr,rtl,|,help”,
                    ‘buttonConfig2’ => “insertlayer,moveforward,movebackward,absolute,|,media,image,anchor,charmap,advhr,hr,|,blockquote,cite,ins,del,abbr,acronym,|,insertdate,inserttime,|,code,styleprops,cleanup,|,visualchars,pagebreak,|,preview,print”,
                    ‘buttonConfig3′ => “bold,italic,underline,sub,sup,strikethrough,|,bullist,numlist,indent,outdent,|,justifyleft,justifycenter,justifyright,justifyfull,|,visualaid,tablecontrols”),
            ’email_compose’ => array(
                    ‘buttonConfig’ => “cut,copy,paste,pastetext,pasteword,selectall,|,link,unlink,|,forecolor,backcolor,|,fontsizeselect,fontselect,formatselect,|,ltr,rtl,|,code,|,help”,
                    ‘buttonConfig2’ => “bold,italic,underline,sub,sup,|,bullist,numlist,indent,outdent,|,justifyleft,justifycenter,justifyright,justifyfull,|,charmap,hr,|,visualaid,tablecontrols”,
                    ‘buttonConfig3′ => “”),
            ’email_compose_light’ => array(
                    ‘buttonConfig’ => “cut,copy,paste,pastetext,pasteword,selectall,|,link,unlink,|,forecolor,backcolor,|,fontsizeselect,fontselect,formatselect,|,ltr,rtl,|,code,|,help”,
                    ‘buttonConfig2’ =>
    “bold,italic,underline,sub,sup,|,bullist,numlist,indent,outdent,|,justifyleft,justifycenter,justifyright,justifyfull,|,charmap,hr,|,visualaid,tablecontrols”,
                    ‘buttonConfig3’ => “”),
        );

    /*
    // Enhanced Plugin Options
      // Enhancement Notes:
          //  Template & styleselect not used, but if implemented they is here;
          //  Spellchecker – Need to install Spellchecker plugin and have php’s optional PSpell/ASpell installed with the appropriate dictionaries OR internet connection & able to setup GoogleSpell or some other similar service.

      // Email_Compose(Regular & Light) – Basic Layout
         //  Plugins: Added -> Template, preview & spellchecker
         //  Buttons1: Added -> Template, styleselect & preview
         //  Buttons2: Added -> Spellchecker
         //  Buttons3: Added -> None
      //  plugins : “paste,template,table,directionality,advhr,preview”,
      //  theme_advanced_buttons1 : “cut,copy,paste,pastetext,pasteword,template,selectall,|,link,unlink,|,forecolor,backcolor,|,fontsizeselect,fontselect,formatselect,styleselect,|,ltr,rtl,|,code,|,preview,|,help”,
      //  theme_advanced_buttons2 : “spellchecker,|,bold,italic,underline,sub,sup,|,bullist,numlist,indent,outdent,|,justifyleft,justifycenter,justifyright,justifyfull,|,charmap,hr,|,visualaid,tablecontrols”,
      //  theme_advanced_buttons3 : “”,

      // Default (Campaign) – Advanced Layout
         //  Plugins: Added -> Template & spellchecker
         //  Buttons1: Added -> Template & styleselect
         //  Buttons2: Added -> Spellchecker
         //  Buttons3: Added -> None
      //  plugins : “style,paste,template,advlink,directionality,preview,print,visualchars,pagebreak,spellchecker,layer,media,advimage,advhr,xhtmlxtras,insertdatetime,table”,
      //  theme_advanced_buttons1 : “cut,copy,paste,pastetext,pasteword,template,selectall,|,link,unlink,|,forecolor,backcolor,|,fontsizeselect,fontselect,formatselect,styleselect,ltr,rtl,|,help”,
      //  theme_advanced_buttons2 :
    “spellchecker,|,insertlayer,moveforward,movebackward,absolute,|,media,image,anchor,charmap,advhr,hr,|,blockquote,cite,ins,del,abbr,acronym,|,insertdate,inserttime,|,code,styleprops,cleanup,|,visualchars,pagebreak,|,preview,print”,
      //  theme_advanced_buttons3 : “bold,italic,underline,sub,sup,strikethrough,|,bullist,numlist,indent,outdent,|,justifyleft,justifycenter,justifyright,justifyfull,|,visualaid,tablecontrols”,
    */

    *NOTES to Developers
     
      buttonConfig – All buttonConfig variables except buttonConfig3 end with a comma. This has been noted to cause irregular problems in ie; therefore, there should be no trailing comma in the buttons lines (unless it is needed then removed via sugar 😉 )

    The safari plugin for TinyMCE was removed as of version 3.3. It is still in the the Sugar code as of 6.4, which uses TinyMCE version 3.4.4. See “email_compose_light”

    // To get the spellchecker to work the following need to be added in the $defaultConfig variable:

    ‘gecko_spellcheck’ => true,
    // Config is not implimented properly, extra commas that cause glitches and there are extra plugins loaded and no buttons for them or vise versa

    $pluginsConfig[“email_compose_light”]:
      – ,safari -> REMOVE – plugin obsolete; plugin removed from TinyMCE as of 3.3; dead code (unless TinyMCE is customized in sugar)
      – advhr, -> ADD – Plugin is utilized; (default attributes calls them and it is not overwritten)

    $pluginsConfig[“email_compose_light”] & $pluginsConfig[“email_compose”]:
      – insertdatetime, -> REMOVE – plugin not used
      – paste, -> REMOVE / ADD “,pastetext,pasteword,selectall” – plugin not used, but would be useful
      – directionality, -> ADD “,separator,ltr,rtl,separator” – let’s face it, it is a global economy, don’t remove it — use it.
     
    $pluginsConfig[“email_compose”]:
      – table, -> plugin not used – ADD “,separator,tablecontrols,separator” to buttonConfig – useful

    (or remove)
      – preview, -> REMOVE – plugin not used
      – searchreplace, -> REMOVE – plugin not used
      – fullpage, -> REMOVE – plugin not used
     
    Mode is set to exact, but element is never set. -> set $targets or change mode

    $pluginsConfig[“email_compose_light”]:

      – ,safari -> REMOVE – plugin obsolete; plugin removed from TinyMCE
    as of 3.3; dead code (unless TinyMCE is customized in sugar)

      – advhr, -> ADD – Plugin is utilized; (default attributes calls them and it is not overwritten)

    $pluginsConfig[“email_compose_light”] & $pluginsConfig[“email_compose”]:

      – insertdatetime, -> REMOVE – plugin not used

      – paste, -> REMOVE / ADD “,pastetext,pasteword,selectall” – plugin not used, but would be useful

      – directionality, -> ADD “,separator,ltr,rtl,separator” – let’s face it, it is a global economy, don’t remove it — use it.

     

    $pluginsConfig[“email_compose”]:

      – table, -> plugin not used – ADD “,separator,tablecontrols,separator” to buttonConfig – useful (or remove)

      – preview, -> REMOVE – plugin not used

      – searchreplace, -> REMOVE – plugin not used

      – fullpage, -> REMOVE – plugin not used

    Template could be setup to call the email and campaign templates

  4. 

    How would one modify TinyMCE to emulate all of the buttons that show up when editing email templates? I need ones like Hyperlink, Indent, etc…

  5. 

    I have been able to use the custom files to get this to work on a 6.4.2 instance.
    I made two files in custom/include
    “tinyMCEDefaultConfig.php”
    “tinyButtonConfig.php”

    Inside the tinyMCEDefaultConfig.php you put in the $defaultConfig array

    //// CODE ////

    $defaultConfig = array(
    ‘convert_urls’ => false,
    ‘height’ => 300,
    ‘width’ => ‘100%’,
    ‘theme’ => ‘advanced’,
    ‘theme_advanced_toolbar_align’ => “left”,
    ‘theme_advanced_toolbar_location’ => “top”,
    ‘theme_advanced_buttons1’ => “”,
    ‘theme_advanced_buttons2’ => “”,
    ‘theme_advanced_buttons3’ => “”,
    ‘strict_loading_mode’ => true,
    ‘mode’ => ‘exact’,
    ‘language’ => ‘en’,
    ‘plugins’ => ‘advhr,insertdatetime,table,preview,paste,searchreplace,directionality,spellchecker’,
    ‘elements’ => ”,
    ‘extended_valid_elements’ => ‘style,hr[class|width|size|noshade],@[class|style]’,
    ‘content_css’ => ‘include/javascript/tiny_mce/themes/advanced/skins/default/content.css’,
    );

    //// END OF CODE EXAMPLE ////

    Then in the tinyButtonConfig.php you place the $buttonConfigs array

    //// CODE ////

    $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,spellchecker,bullist,numlist,separator,justifyleft,justifycenter,justifyright,
    justifyfull,separator,forecolor,backcolor,separator,styleselect,formatselect,fontselect,fontsizeselect,”,
    ‘buttonConfig2’ => “”,
    ‘buttonConfig3′ => “”),
    ’email_compose_light’ => array(
    ‘buttonConfig’ => “code,help,separator,bold,italic,underline,strikethrough,separator,spellchecker,bullist,numlist,separator,justifyleft,justifycenter,justifyright,
    justifyfull,separator,forecolor,backcolor,separator,styleselect,formatselect,fontselect,fontsizeselect,”,
    ‘buttonConfig2’ => “”,
    ‘buttonConfig3′ => “”),
    );

    ///// END OF CODE EXAMPLE ////

    Doing only this doesn’t work because the Plugin needs the customised $pluginsConfig array which does not have its own overload function (unlike overloadButtonConfigs and overloadDefaultConfigs does). However, if you include the same functionality into one of your custom files (I’ve done so in tinyButtonConfig.php) then you can override the $pluginsConfig array to include the spellchecker. So include this code into one of your customfiles:

    //// CODE /////

    $pluginsConfig = array(
    ’email_compose_light’ => ‘insertdatetime,paste,directionality,safari,spellchecker’,
    ’email_compose’ => ‘advhr,insertdatetime,table,preview,paste,searchreplace,directionality,fullpage,spellchecker’,
    );

    if(!isset($pluginsConfig))
    return;

    foreach ($pluginsConfig as $k => $v)
    {
    if( isset($this->pluginsConfig[$k]) )
    $this->pluginsConfig[$k] = $v;
    }

    ///// END OF CODE EXAMPLE /////

    After this, you should have the spellchecker icon in your Email editor without worrying about it not being upgrade safe 🙂

Trackbacks and Pingbacks:

  1. Check spelling in preparing e-mail - February 1, 2013

    […] […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s