MediaWiki Spell Checker

From MontCo MediaWiki

Jump to: navigation, search

Note: This functionality is still under construction - there were several issues related to AJAX and to IE7 that are being resolved as we speak - this is not a high priority project at this time.

For users of Internet Explorer, there is an addin called ieSpell that works very well.

Contents

Credits

Original version provided by: http://mcintosh.cjb.net/wiki/index.php/Spell_Checker

This Mediawiki specific version provided by: Aron Rubin <arubin@atl.lmco.com>


Introduction

Generic spellchecker framework that can be used with any application to provide spell checking. Current Demo's, to see it in action try out one of the following demo's. Try and enter text and use the "Spell Check" link to have it spell check your post.

Download the following spellcheckext-0.6.tar.gz package

How it works

It consists of 3 Parts

  • pseudo web-service
  • proxy to call web-service
  • javascript file to parse results and present to the user.

Web Service

The webservice can be created any way you like, it must be able to accept a "document" post element with the contents of the page sent to it. Your service can check the spelling any way it wants however it must return an XML document formatted as

<spellcheck>
    <suggestion>
        <word>ORTS</word>
        <suggest>ROTS</suggest>
        <suggest>PORTS</suggest>
        . 
        .
    </suggestion>
    .
    .
    .
</spellheck>

I use php with the aspell library to check each word and build the formatted response.

Proxy

The proxy is used so you can force the javascript call to allow you to request a service from another server. So it is simply a proxy that lets you use another server spellcheck feature. For example you could point at my service at http://mcintosh.cjb.net/spellcheck/spellcheck.php however I wouldn't recommend it for a high volume site since my server is very slow.

Presentation

The presentation layer is coded in javascript. It uses a synchronous post to the web service to get the XML back. It then parses the XML and uses the misspelled words to build the "spellCheckDiv" which is the interface for users that highlight misspellings and suggest new words. To understand what I mean, look at the demos.


Install

Download Spellcheck Extension Package

mw_spellcheckext-0.5.zip

Should include these 4 files:

  • extensions/spellcheck.js
  • extensions/spellcheckext.php
  • skins/common/images/button_spell.png
  • skins/common/images/button_spell_done.png

Copy the files into the same place in your mediawiki directory.

Add a Hook

Sadly there are not many hooks in the mediawiki source and on needs to be added to support this extension. Add the line proceeded by a plus into the right place (indicated by the line number and lines of content) in your includes/EditPage.php file.

+++ includes/EditPage.php       2005-12-08 15:22:43.529059000 -0500
@@ -1124,6 +1124,7 @@

                $toolbar.="addInfobox('" . wfEscapeJsString( wfMsg( "infobox" ) ) .
                        "','" . wfEscapeJsString( wfMsg( "infobox_alert" ) ) . "');\n";
+                wfRunHooks( 'EditPageToolbar', array( &$toolbar, NULL ) );
                $toolbar.="document.writeln(\"</div>\");\n";

                $toolbar.="/*]]>*/\n</script>";

Give your mispellings some style

Add the following styles to your favorate skin's main.css:

.MisspeltWord { color :#FF0000 ; text-decoration: underline; font-weight:bold ; cursor: pointer;}
.CorrectedWord { color :#008800 ; text-decoration: underline; font-weight:bold ; cursor: pointer;}
/* Can't use hover because IE doesn't support it
 * Instead we use two classes and have javascript change between the two in code */
.suggestDiv       { background-color:#ccFFcc; cursor: pointer;}
.suggestDiv-hover { background-color:#FF0000; cursor: pointer;}
#editform textarea {
  border: inset 1px gray;
  background-color: #fdfdfd;
  padding: 2px;
  font-family: monospace;
  font-size: 90%;
  line-height: 1.1em;
}
.spellCheckDiv    {
  border: inset 1px gray;
  background-color:#f0f5ff;
  padding: 2px;
  margin: 0;
  font-family: monospace;
  font-size: 90%;
  line-height: 1.1em;
}
.spellCheckPre {
  margin: 0;
  border: none;
  color: transparent;
}

Engage

Add the following to your

include( "extensions/spellcheckext.php" );

For more info look here [1]

Personal tools