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/>, <OptionsButton/>, <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> <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> <ChangeToLabel/> <br> <ChangeToBox/> <br> <SuggestionsLabel/> <br> <SuggestionsBox/> </td><td> <table border=0><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> <UndoButton/> </td></tr> <tr><td> <OptionsButton/> </td></tr> <tr><td> <FinishButton/> </td></tr></table> </td></tr></table> "/> </RapidSpellWeb:RapidSpellWeb> </body> </html>
The only restriction is that the special tags must be on a line by themselves.
If the jQuery Dialog is used (ie. if rapidSpell.dialog_setUseDivDialog(true); is called on the page), then the custom dialog is implemented by adding the UI elements to the page where the spell checker is used. An example of this is in the MVC demo project, under the RapidSpell install directory.
<script type="text/javascript"> rapidSpell.dialog_setUseDivDialog(true); rapidSpell.dialog_default_width = 500; rapidSpell.dialog_default_height= 350; </script> <style type='text/css'> #rsw_documentTextPanel { border: 1px solid #aaa; border-radius: 3px; } #rsw_word, #rsw_suggestions { border: 1px solid #aaa; border-top-color: #a0a0a0; } #rsw_optionsDialog { display: none; position: absolute; margin-left: auto; margin-right: auto; margin-top: auto; margin-bottom: auto; left: 0; right: 0; top: 0; bottom: 0; width: 295px; height: 230px; z-index: 101; background-color: white; border: 1px solid #444; border-radius: 5px; padding: 8px; } #rsw_optionsDialog_Backing { display: none; position: absolute; margin-left: auto; margin-right: auto; margin-top: auto; margin-bottom: auto; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%; background-color: rgba(100,100,100,.60); z-index: 100; } #rsw_optionsDialog > label { display: block; padding-bottom: 12px; } #rsw_optionsDialog > input { margin-right: 9px; margin-top:12px; } #rsw_optionsHeader { font-size: 1.2em; border-bottom: 1px solid #aaa; } #rsw_documentTextPanel { border: 1px solid #aaa; border-radius: 3px; text-align: justify; padding:4px; overflow-y:scroll; margin-bottom:4px; } .badWordHighlight{ background-position: bottom;background-repeat: repeat-x;background-color: #ededff; } #rsw_documentTextPanel{ height: 150px; } #rsw_changePanel{ width: 200px; float:left; } #rsw_buttonPanel{ width:250px; float:right; } #rsw_buttonPanel div, #rsw_buttonPanel input{ margin-right:0px; width:100px; font-size:9pt; } #rsw_optionsButton { font-size:9pt; } #rsw_dialog input, #rsw_dialog select { margin:4px; } #rsw_buttonPanel input{ margin: 10px; } #rsw_dialog { font-family:'Segoe UI', Arial, sans-serif; font-size:10pt; padding:10px; z-index:500; } #rsw_word { width:197px; } #rsw_suggestions { width:200px; } </style> .... <div id="rsw_dialog" nospell="true" title="Custom Spell Check" style="display:none;"> <form id="spellCheckerForm" onsubmit="rsw_change(); return false;"> <div id="rsw_documentTextPanel"> </div> <div id="rsw_changePanel"> <label for="rsw_word"><span>Change To:</span></label> <input name="rsw_word" type="text" id="rsw_word" size="16" tabindex="4" /> <label for="rsw_suggestions"><span>Suggestions:</span></label> <select name="rsw_suggestions" id="rsw_suggestions" size="6" onchange="rsw_changeSuggestions()" ondblclick="rsw_change()" tabindex="5"> <option value="No Suggestions.">No Suggestions.</option> </select> </div> <div id="rsw_buttonPanel"> <div style="display: inline-block;"> <input type="button" value="Ignore" id="rsw_ignoreButton" onclick="rsw_ignoreCurrent()" tabindex="1" name="rsw_ignoreButton" /> <input type="button" value="Ignore All" id="rsw_ignoreAllButton" onclick=" rsw_ignoreAllInstances()" tabindex="2" name="rsw_ignoreAllButton" /> <input type="button" value="Add" id="rsw_addButton" onclick="rsw_addCurrent()" tabindex="3" name="rsw_addButton" /> <input type="button" value="Options..." id="rsw_optionsButton" onclick="rsw_showOptions()" tabindex="10" name="rsw_optionsButton" /> </div> <div style="display: inline-block;"> <input type="button" value="Change" id="rsw_changeButton" onclick=" rsw_change()" tabindex="6" name="rsw_changeButton" /> <input type="button" value="Change All" id="rsw_changeAllButton" onclick=" rsw_changeAll()" tabindex="7" name="rsw_changeAllButton" /> <input type="button" value="Undo" id="rsw_undoButton" onclick=" rsw_undoChange()" tabindex="8" name="rsw_undoButton" /> <input type="button" value="Finish" id="rsw_cancelButton" onclick=" rsw_finish(true)" tabindex="9" name="rsw_cancelButton" /> </div> </div> </form> <div id="rsw_optionsDialog"> <h1 id="rsw_optionsHeader">Basic Settings</h1> <label> <input type="checkbox" id="IgnoreCapitalizedWords"/>Ignore words in UPPERCASE</label> <label><input type="checkbox" id="IgnoreWordsWithDigits"/>Ignore words with numbers</label> <label><input type="checkbox" id="IgnoreURLsAndEmailAddresses"/>Ignore internet addresses and emails</label> <label><input type="checkbox" id="IgnoreCase"/>Ignore improper case (eg. "australia", "tABle")'</label> <input type="button" value="OK" onclick=" rsw_saveOptions()"/> <input type="button" value="Cancel" onclick=" rsw_cancelOptions()"/></div> <div id="rsw_optionsDialog_Backing"></div> </div>
When a DIV with id=rsw_dialog is included on the page, it is assumed that this will contain all the necessary UI elements, and this will be used instead of generating new ones. In order to hide elements (such as buttons), it is recommended that they are hidden with display:none (CSS) rather than removed from the HTML markup (as this could cause Javascript errors).