We have left this article up for legacy version users - if you are using the current version, we recommend following the example in the Help, which is more up to date and simpler: https://keyoti.com/products/rapidspell/javaWeb/Helpv5/UserGuide/Examples/JSmode/3rd_Party_textboxes.htm This article was generously contributed by a user, Michael Cory (Kyran Research Associates) This article assumes that you already have CKEditor and RapidSpell Web Java working separately in your JSP page and you want to use RapidSpell in place of the spell checker that comes with CKEditor. In the first part we will add a RapidSpellWeb tag to our JSP page and hook it up to work with CKEditor. By adding a JavaScript function to the page the text from the CKEditor will be passed to RapidSpell and RapidSpell can pass back the updated text. In the second part we will add a plugin to CKEditor so that we can use a button in the CKEditor toolbar to open the RapidSpell window. 
Image 1. Custom plugin to launch RapidSpell from CKEditor toolbar Part 1. Integrating RapidSpell and CKEditor First make sure your project includes the RapidSpell jar files and that you have RapidSpellWeb.tld in your WEB-INF folder. Add the taglib tag to the top of your JSP page… <%@ taglib uri="/WEB-INF/RapidSpellWeb.tld" prefix="RapidSpellWeb" %>Add a rapidSpellWebLauncher tag after the call to CKEDITOR.replace( )… <script type="text/javascript">CKEDITOR.replace( 'cmCourseDesc', {customConfig : '../jscripts/ckeditor_config.js'}); script>< RapidSpellWeb:rapidSpellWebLauncher id="cmCourseDescRS"textComponentInterface="Custom"textComponentName="cmCourseDesc"showButton="true"ignoreXML="true"rapidSpellWebPage="./pages/RapidSpellCheckerPopUp.jsp" popUpWindowName="Spell Checker"separateHyphenWords="false"windowWidth="550"windowHeight="450" />rapidSpellWebLauncher tag properties: id ="cmCourseDescRS": In this example I use the same name as my textarea tag, plus ‘RS". My textarea id = ‘cmCourseDesc’, so I named the RapidSpellWeb tag ‘cmCourseDescRS’. textComponentInterface ="Custom":Required for integration textComponentName ="cmCourseDesc":As usual, must match the name of your textarea showButton ="true":For now, set this to true to create the default button to launch the RapidSpell window; later this will be set this to false after we add the CKEditor plugin to launch RapidSpell from the CKEditor toolbar. ignoreXML ="true":By setting this attribute to true we will not see all the HTML formatting tags in the spell checker window. rapidSpellWebPage ="./pages/RapidSpellCheckerPopUp.jsp":The URL of the page holding the RapidSpellWeb control. Add JavaScript function: Add the following JavaScript function to the <head> section of your JSP page. This function allows RapidSpell to ‘pull’’ data from the CKEditor editor instance when the RapidSpell window is launched, then ‘push’ data back to the CKEditor editor instance after spell checking. /* * Custom JavaScript method for RapidSpell to interface with CKEditor. */ function RSCustomInterface(textComponentName) {this.tbName = textComponentName;this.getText = getText;this.setText = setText2;function getText() {// pass data from CKEditor to RapidSpell. return CKEDITOR.instances[textComponentName].getData(); } function setText2(text) {// pass data back from RapidSpell to CKEditorCKEDITOR.instances[textComponentName].setData(text); } } At this point you should have a ‘Check Spelling’ button just after your textarea control. When you click this button the RapidSpell window should open with the text from your textarea. Any changes resulting from the spell checking operation should be passed back to your (CKEditor) textarea. Part 2. Adding rapidspell plugin Now that RapidSpell and CKEditor are communicating we want to launch the RapidSpell window from a custom button on the CKEditor toolbar. First, set the rapidSpellWebLauncher showButton attribute to false so that RapidSpell will not generate its own ‘Check Spelling’ button. The standard method of using CKEditor is to extract the archive into your web application using the folder structure from the archive. So you should have a folder called ‘ckeditor’. Create a new folder called ‘rapidspell’ under ckeditor\plugins. Create a new file in this folder called ‘plugin.js’. Copy the following code to the new plugin.js file… ( function(){var a= {exec: function(editor) {var editorName = editor.name;var rsObjectName = "rsTCInt" + editorName + "RS";var fun = "popUpCheckSpelling" + editorName + "RS";window[fun](rsObjectName); } }, b= 'rapidspell';CKEDITOR.plugins.add(b,{ init: function(editor){editor.addCommand(b,a); editor.ui.addButton( 'rapidspell',{label: 'Rapid Spell', icon: this.path + 'rsbuttonicon.gif',command:b }); } }); })(); This JavaScript function adds the rapidspell plugin with a button labeled ‘Rapid Spell’ using an icon - rsbuttonicon.gif. Create a .gif file 15 pixels square, name it ‘rsbuttonicon.gif’ and copy it into the ckeditor\plugins\rapidspell folder. The interesting part of this function is the part that starts with ‘var a =’. This function is passed the CKEditor editor instance as a parameter. First we get the name of the editor instance. We need this to call the appropriate JavaScript function which RapidSpell has generated to launch the RapidSpell window. Note that I tack on "RS" when forming the name of the JavaScript method I want to call. This is only here because my naming convention was to use the same name as my textarea plus "RS". If you have some other naming convention then you will need to modify these two lines where you see "RS"; but I suggest that the id attribute of your rapidSpellWebLauncher tag starts or ends with the same id value you gave to your textarea. In this example the id of the rapidSpellWebLauncher is "cmCourseDescRS"… <RapidSpellWeb:rapidSpellWebLauncher id="cmCourseDescRS".............. /> RapidSpell will generate a JavaScript function like this… popUpCheckSpellingcmCourseDescRS(interfaceObjectName) { … … and the parameter you need to pass to this function is "rsTCInt" + the id of your rapidSpellWebLauncher tag. So the call we need to make in this example is popUpCheckSpellingcmCourseDescRS('rsTCIntcmCourseDescRS') The plugin function accomplishes this call. Because it is passed the name of the textarea control, I add "RS" to it when building the call to the RapidSpell function. Reference the custom plugin: Finally, we need to tell CKEditor about our plugin. Add the following line to the ckeditor\config.js file… // Referencing the custom RapidSpell pluginconfig.extraPlugins = 'rapidspell'; I am using a custom configuration file to pick and choose which items I have in my toolbar so for me this line goes in my ckeditor_config,js file. Finally, you need to position the new plugin button in the toolbar. The config.js file will look something like this… config.toolbar = 'myToolbar';config.toolbar_ 'myToolbar' =[ [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','rapidspell'],[ …]; That’s it. Now you should see a new toolbar item in your CKEditor (see image 1). Michael Cory Kyran Research Associates Credits: I followed this article to make the custom toolbar button work: http://syrinx.ph/articles/CkEditorPluginGuide.aspx Syrinx.ph © 2007 - 2010 |