RapidSpell Web Java works using JavaScript on the client side, so the spell checker can be used with frameworks such as Angular on the front-end.

RapidSpell requires a back-end to do the spell checking, and to facilitate that we can use a basic project that exposes the RapidSpell service API.

Please download the demo here https://keyoti.com/downloads/RapidSpellWeb-Java-Angular.zip (it is 400MB because Angular projects tend to bloat)

In the solution you will see a front-end project that is a simple Angular template project with a textbox added and the RapidSpell scripts. 

To run it,

cd FrontEnd\RSWeb-Java-Angular-FrontEnd\

ng serve

Open a browser to http://localhost:4200/ and the Angular site should load with one textbox.  The spell checker will not work until the back-end is started, which we will now do.

The back-end J2EE project is in BackEnd\RapidSpellAPI, this folder is a Netbeans project but you can also get the prebuilt WAR file from BackEnd\RapidSpellAPI\dist and deploy it on your server (note that as it is, the demo will only run on Tomcat because of its use of a CORS filter, please see below)

Eg. Copy BackEnd\RapidSpellAPI\RapidSpellAPI.war to the webapps folder under your Tomcat install and restart Tomcat.

The back-end runs by default at http://localhost:8080/RapidSpellAPI and you can verify that the application is running properly by visiting http://localhost:8080/RapidSpellAPI/a.rapidspellweb?t=r&n=blank.html if you see a blank page instead of a 404 or other HTTP error, then it is working.  Repeat, blank page is good.

Here are the important parts of how it works:

Front End:

RapidSpell scripts are in assets/Keyoti_RapidSpell_Web_Common

The scripts are imported and setup in index.html

    <script src="//code.jquery.com/jquery-1.12.4.min.js"></script>

    <script src="assets/Keyoti_RapidSpell_Web_Common/RapidSpell-AYT.js"></script>

    <script src="assets/Keyoti_RapidSpell_Web_Common/RapidSpell-DIALOG.js"></script>

    <script type="text/javascript">

              var currentDialogTB;

              rapidSpell.setServiceType('servlet');

              rapidSpell.dialog_setUseDivDialog(true);

              rapidSpell.ayt_helperURL ="http://localhost:8080/RapidSpellAPI/a.rapidspellweb?t=a";

              rapidSpell.dialog_popupURL  ="http://localhost:8080/RapidSpellAPI/a.rapidspellweb?t=d";

              rapidSpellExtension.serviceProxy.commonFolderUrl = "http://localhost:8080/RapidSpellAPI/a.rapidspellweb";

              rapidSpell.addEventListener('ayt_correction', function (textbox, data) {

                  window.angularComponentReference.zone.run(() => { window.angularComponentReference.updateTBModel(textbox.shadowTB); });

              });

              rapidSpell.addEventListener('dialog_startedcheckingtextbox', function (src, tb) {

                  currentDialogTB = tb;

              });

              rapidSpell.addEventListener('dialog_finishedcheckingall', function () {

                  window.angularComponentReference.zone.run(() => { window.angularComponentReference.updateTBModel(currentDialogTB); });

              });    </script>

Note that https://localhost:8080 is the URL based on the port of the backend project.

There is a textbox on the main page, which as long as it has an id it will be spell checked (and all other textboxes too, unless explicitly marked otherwise).

There is some plumbing code too, such as window.angularComponentReference.zone.run(() => { window.angularComponentReference.updateTBModel(textbox.shadowTB); });

which is there to update the Angular model when the spell check completes, it also requires a bit of code in the spell.component.ts

  /*Added for RapidSpell*/

  constructor(private ngZone: NgZone) {

  }

  ngOnInit() {

    (window as any)['angularComponentReference'] = { component: this, zone: this.ngZone, updateTBModel: (tb: HTMLTextAreaElement) => this.updateTBModel(tb), };

  }

  public textareatext : string='Hi heere is soome text with the model mirrrorewd.';

  private updateTBModel(tb: HTMLTextAreaElement): void {

    this.textareatext = tb.value;

  }

Back End:

RapidSpellAPI is mostly empty; it only needs to do 2 things.

1.       Register the RapidSpellWebHandlerServlet per the normal RapidSpell Web Java install instructions, in web.xml

2.       Register the CorsFilter to allow CORS (cross origin requests, because the front-end and the back-end are running on different ports, 4200 and 8080).  NOTE: this filter is built in to Tomcat, and won’t be present on other application servers, please find an alternative way to set the Access-Control-Allow-Origin header.

Run the RapidSpellAPI application to allow the spell check to work on the front end.