WProofreader plugin for Froala Editor

The multilingual spelling and grammar checking solution for Froala Editor. It provides both instant and in dialog proofreading modes in a convenient UI, registered as a native Froala Editor plugin.

The plugin inherits all functionality of the WProofreader component and features of the editor. For more details, visit the WProofreader repo or official web page.

Table of contents

• Install instructions
• Toolbar button
• Programmatic control
• Documentation
• License

Install instructions

1. Install the plugin.

   npm install @webspellchecker/wproofreader-froala

   Requires Froala Editor 4.x.

   WProofreader renders its own in-editor badge for instant and in dialog proofreading.

   import FroalaEditor from 'froala-editor';
   import '@webspellchecker/wproofreader-froala';
   
   new FroalaEditor('#editor', {
   	wproofreader: {
   		/* config of WProofreader */
   	}
   });

   For a setup without a build step, load the UMD bundle after Froala Editor:

   <script src="froala-editor/js/froala_editor.pkgd.min.js"></script>
   <script src="node_modules/@webspellchecker/wproofreader-froala/dist/index.umd.cjs"></script>

   The WProofreader button also can be added to the Froala toolbar (see Toolbar button).

2. Configure the plugin.

   For a detailed list of options, refer to the documentation.

   For the Cloud-based version of WProofreader:

   wproofreader: {
   	serviceId: 'your-service-ID', // required for the Cloud version only
   }

   serviceId is a mandatory parameter for activating the Cloud-based version.

   For the Server-based version of WProofreader:

   wproofreader: {
   	serviceProtocol: 'https',
   	serviceHost: 'localhost',
   	servicePort: '443',
   	servicePath: 'virtual_directory/api', // by default the virtual_directory is wscservice
   	srcUrl: 'https://host_name/virtual_directory/wscbundle/wscbundle.js'
   }

   Unlike the Cloud-based version, the serviceId parameter is not used here. Instead, specify the path to the backend entry point hosted on your infrastructure.

   Both classic (inline element) and iframe (iframe: true) editor modes are supported.

   If the editor starts read-only, proofreading is disabled on startup to match the editor state. While the HTML code view is active, proofreading is paused and resumes after switching back to the WYSIWYG view.

   Editors without a wproofreader configuration are not affected: the plugin stays inert for them.

Toolbar button

To show the WProofreader button, add 'wproofreader' to the toolbar configuration:

new FroalaEditor('#editor', {
	toolbarButtons: ['bold', 'italic', 'underline', '|', 'wproofreader'],
	wproofreader: {
		serviceId: 'your-service-ID',
		lang: 'en_US'
	}
});

Clicking the button opens a dropdown with the following options:

• Enable or Disable, turns proofreading on or off; the item follows the current state.
• Settings, opens the WProofreader settings dialog.
• Proofread in dialog, opens the proofreading dialog.

If the toolbar does not include 'wproofreader', the button is not added, and WProofreader's own badge provides the controls.

Programmatic control

Reach the plugin through the editor instance:

const wpr = editor.wproofreader;
wpr.disable();       // stop proofreading
wpr.enable();        // resume
wpr.isDisabled();    // current state, true when off
wpr.openSettings();  // open the settings dialog
wpr.openDialog();    // open the proofreading dialog
wpr.destroy();       // remove WProofreader together with its toolbar button

Documentation

• WProofreader options
• Froala Editor documentation

License

Licensed under the terms of the MIT license. For full details, see the LICENCE file.