WProofreader module for Quill

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

The module 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 module.

   npm install @webspellchecker/wproofreader-quill
   

   Requires Quill 2.x.

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

   import Quill from 'quill';
   import '@webspellchecker/wproofreader-quill';
   import '@webspellchecker/wproofreader-quill/styles.css';
   
   new Quill('#editor', {
   	theme: 'snow',
   	modules: {
   		toolbar: [ /* ... */ ],
   		wproofreader: {
   			/* config of WProofreader */
   		}
   	}
   });

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

2. Configure the module.

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

   For the Cloud-based version of WProofreader:

   wproofreader: {
   	lang: 'en_US', // sets the default language
   	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: {
   	lang: 'en_US', // sets the default language
   	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.

   If the editor starts read-only (readOnly: true), proofreading is disabled on startup to match the editor state.

Toolbar button

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

new Quill('#editor', {
	theme: 'snow',
	modules: {
		toolbar: [
			['bold', 'italic', 'underline'],
			['wproofreader'] // the WProofreader button
		],
		wproofreader: {
			serviceId: 'your-service-ID',
			lang: 'en_US'
		}
	}
});

Clicking the button opens a dropdown with the following options:

• Toggle, turns proofreading on or off.
• Settings, opens the WProofreader settings dialog.
• Proofread in dialog, opens the proofreading dialog.

While proofreading is off, only Toggle is shown; Settings and Proofread in dialog appear once it is on.

If the toolbar does not include 'wproofreader' (or the editor has no toolbar, for example with the bubble theme), the button is not added, and WProofreader's own badge provides the controls.

Programmatic control

Reach the module through Quill's registry:

const wp = quill.getModule('wproofreader');
wp.disable();       // stop proofreading
wp.enable();        // resume
wp.toggle();        // flip state
wp.isDisabled();    // current state, true when off
wp.openSettings();  // open the settings dialog
wp.openDialog();    // open the proofreading dialog
wp.destroy();       // remove WProofreader and release resources

NB: As Quill doesn't provide module-teardown lifecycle, wp.destroy() should be called on removal the editor.

Documentation

• WProofreader options
• Quill documentation

License

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