Global AEM spell checker

I have recently started working a AEM library of common features. We have started adding a lot of stuff within that library. A recent addition to the library is AEM/CQ5 spell checker.

AEM CQ Spell Checker Utility
The project aem spell checker has been created using maven archetype 7 project.

Modules
Spell checker utility consists of two modules. Spell checking in both the modules in done using Jazzy spell checker utility. It is a very common spell checking utility used in J2ee projects. It is easy to integrate it with existing projects as well. All the code is servlet based which are registered under /bin/aemfeatures/* so this path should be enabled in case you want to run this code via dispatcher. The servlets have properties to provided phonet and dictionary files. Currently, both of these files have to live under crx-quickstart/conf directory. Samples files have been checked into the core/resource directory. Adding a word is a simple as adding in the en.0 file. Below should be modified in SpellCheckerServlet if you want to put directory in a custom field.

@SlingServlet(paths=”/bin/aemfeatures/spellChecker”, metatype=true) @Properties(value = { @Property(label=”dictionary.location”,name = “dictionary.location”, value = “crx-quickstart/conf/en.0″), @Property(label=”phonet.location”,name = “phonet.location”, value = “crx-quickstart/conf/phonet.en”)})

1) Global Spell Checker -: The global spell checker allows you to spell check the whole website in one go. You should have access to latest content package for running this module. The project only works on the publisher instance as for each page a server request is made and dom in parsed and misspelled words are found. The logic to do all the iteration is quite fast. Whole Geometrixx was parsed and spell checked in 20-30 seconds. Once the results are returned all the words with their pages references are downloaded to users' computers automatically as CSV.

The spell checker was also extended to provide a raw .txt file with comma-separated words that will not be returned in the CSV list.

2) Page Spell Checker -: It is a single page spell checking mechanism. Whatever misspelled words are found on the page they get highlighted in yellow much like what happens with RTE spell checking utility. All the misspelled words are found first and then Jquery highlighter plugin highlights them in yellow color on the page.

The code can be downloaded from GITHUB https://github.com/sahilthadhani/cq-aem-spellchecker

The page spell checker works by replacing the buttons or menu in the sidekick/coral UI. Basically, it makes an ajax call to the server to find out the misspelled words and with the help of jquery highlighter plugin highlights them. So here is the code for adding a new button in Sidekick.js file and you just add this button to the list of buttons in the sidekick

//Button definition
this.spellCheckButton = new CQ.Ext.Button({
“iconCls”: “cq-sidekick-reload”,
“tooltip”: {
“title”: “spell Check”,
“text”: CQ.I18n.getMessage(“Spell check the page”),
“autoHide”: true
},
“handler”: function() {
var arr = {};
var bodyText = $(‘body’).html();
var bodyFrameText = $(‘iframe’).contents().find(‘body’).html();
if(bodyFrameText.length>bodyText.length){
bodyText=bodyFrameText;
}
arr [‘bodyText’] = bodyText;
$.ajax({
url: “/bin/aemfeatures/spellChecker”,
type: ‘POST’,
data: arr,
async: false,
success:
function(data, textStatus, xhr) {
$(“body”).highlight($.unique(xhr.responseJSON));
$(‘iframe’).contents().find(‘body’).highlight($.unique(xhr.responseJSON), {wordsOnly: true});
},
error:
function(xhr, textStatus, errorThrown) {
$(“#result”).html(“textStatus : ” + textStatus);

}
});
}
});

// Adding the button to the list.

addButtons: function() {
var bbar = this.getBottomToolbar();
bbar.removeAll(true);
bbar.add([
this.editButton,
this.previewButton,
this.spellCheckButton
]);

2) For doing a global spell check a page already exists within the code base /content/aemfeatures/spell-checker-demo.html. Make sure that you run the code on the publisher.