It is possible to customize the layout of the spell checker using a HTML template mechanism. This is done by specifying the Layout.Html property with a string of HTML using special tags to indicate the position of the essential spell checker elements. The tags are <PreviewPane/>*, <AddButton/>, <IgnoreButton/>, <IgnoreAllButton/>, <UndoButton>, <FieldDisplayLabel/>, <ChangeButton/>, <ChangeAllButton/>, <FinishButton/>, <ChangeToLabel/>, <ChangeToBox/>*, <SuggestionsLabel/>, <SuggestionsBox/>* - tags marked with * are required for correct functionality.
When you use the tag this way (on a server other than localhost), it has to be licensed with the licenseKey attribute, eg:
<RapidSpellWeb:rapidSpellWeb ... licenseKey="your license key">
Page containing the RapidSpellWeb control, note because this has different dimensions you should
modify the dialog_width and dialog_height properties in the dialog parameters
to 530 and 250 respectively, eg;
rapidSpell.dialog_width = 530; and rapidSpell.dialog_height = 250;
Put the code below into a JSP page and point the spell checker to it using rapidSpell.dialog_popupURL='path_to_file.jsp';
<%@ taglib uri="http://www.keyoti.com/" prefix="RapidSpellWeb" %> <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> <html> <title>Spell Check</title> <body> <center> <RapidSpellWeb:rapidSpellWeb changeToBoxStyle="font-size:10pt; width:200px; font-family:'arial,helvetica, sans-serif';" changeToLabelStyle="font-size:9pt; font-family:'arial, helvetica, sansserif';" suggestionsBoxStyle="font-size:10pt; width:200px; font-family:'arial,helvetica, sans-serif';" suggestionsLabelStyle="font-size:9pt; font-family:'arial, helvetica, sansserif';" previewPaneStyle="font-family: 'arial, sans-serif, helvetica'; font-size:8pt; font-weight:bold;" previewPaneWidth="200" previewPaneHeight="190" ignoreButtonStyle="font-family:'Tahoma,Arial,Helvetica';font-size:10pt;border:1px solid #b5bed6; background-color:#dddddd; width: 90px;" ignoreButtonOnMouseOver="this.style.backgroundColor='#b5bed6';this.style.borderColor='#08246b';" ignoreButtonOnMouseOut="this.style.backgroundColor='#dddddd';this.style.borderColor='#b5bed6';" finishButtonOnMouseOut="this.style.backgroundColor='#dddddd';this.style.borderColor='#b5bed6';" layout=" <table border=0> <tr><td colspan=3 bgcolor='#eeeeee'><b>MyCo Spell Checking</b></td></ tr> <tr><td> <PreviewPane/> </td> <td> <table border=0 height=190> <tr><td> <ChangeToLabel/> </td></tr><tr><td> <ChangeToBox/> </td></tr><tr><td> <SuggestionsLabel/> </td></tr><tr><td valign=bottom> <SuggestionsBox/> </td></tr> </table> </td> <td> <table border=0 height=160> <tr><td> <IgnoreButton/> </td></tr><tr><td> <IgnoreAllButton/> </td></tr><tr><td> <AddButton/> </td></tr><tr><td> <ChangeButton/> </td></tr><tr><td> <ChangeAllButton/> </td></tr><tr><td> <FinishButton/> </td></tr> </table> </td> </tr> </table> " /> </center> </body> </html>
The only restriction is that the special tags must be on a line by themselves.