WProofreader plugin TinyMCE

The multilingual spelling and grammar checking solution for TinyMCE editor versions starting from v6, including the latest version 8. It provides both instant and in-dialog proofreading modes in a convenient UI.

WProofreader plugin for TinyMCE inherits all functionality of the WProofreader component with slight adaptation to the view and features of the editor. These adaptations include creating a button in the editor toolbar, listening for read-only mode switches and adding a theme adapted to the TinyMCE look and feel. For more details, visit the WProofreader repo or official web page.

Table of contents

• Install instructions
• Documentation
• Reporting issues
• Technical support or questions
• License

Install instructions

1. Install the plugin

   You can integrate the plugin using one of these methods:

   • Using CDN: Suitable for environments where no build process is involved.
   • Using npm: Recommended for projects utilizing a JavaScript bundler.

   Using CDN

   Use the external_plugins option to specify the URL-based location of the entry point file for the plugin and include it as a toolbar item using toolbar option.

   <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/8/tinymce.min.js" referrerpolicy="origin"></script>
   
   <script>
   	tinymce.init({
   		selector: '#editorElement',
   		external_plugins: {
   			wproofreader: 'https://cdn.jsdelivr.net/npm/@webspellchecker/[email protected]/dist/plugin.min.js'
   		},
   		toolbar: '... wproofreader',
   		wproofreader: {
   			/* WProofreader config */
   		}
   	});
   </script>

   Using npm

   To install the plugin via npm, run the following command:

   npm install @webspellchecker/wproofreader-tinymce

   The plugin will be installed into the next folder: node_modules/@webspellchecker/wproofreader-tinymce/dist/plugin.min.js.

   Make the plugin accessible for application by using a web server or copying it to a public folder using a build tool. Then use the external_plugins option to specify the URL-based location of the entry point file for the plugin and include it as a toolbar item using toolbar option.

   <script src="/path/or/uri/to/tinymce.min.js" referrerpolicy="origin"></script>
   
   <script>
   	tinymce.init({
   		selector: '#editorElement',
   		external_plugins: {
   			wproofreader: '/path/or/uri/to/@webspellchecker/wproofreader-tinymce/dist/plugin.min.js'
   		},
   		toolbar: '... wproofreader',
   		wproofreader: {
   			/* WProofreader config */
   		}
   	});
   </script>

   Alternatively, copy the dist plugin subfolder into the TinyMCE plugins folder and rename it to wproofreader. Then use the plugins option to load the plugin and include it as a toolbar item using toolbar option.

   <script src="/path/or/uri/to/tinymce.min.js" referrerpolicy="origin"></script>
   
   <script>
   	tinymce.init({
   		selector: '#editorElement',
   		plugins: '... wproofreader',
   		toolbar: '... wproofreader',
   		wproofreader: {
   			/* WProofreader config */
   		}
   	});
   </script>

   For ES6 projects import the plugin to the source file and use the plugins option to load the plugin. Then include it as a toolbar item using toolbar option.

   import tinymce from 'tinymce';
   import 'tinymce/icons/default/icons.min.js';
   import 'tinymce/themes/silver/theme.min.js';
   import 'tinymce/models/dom/model.min.js';
   import 'tinymce/skins/ui/oxide/skin.js';
   import 'tinymce/skins/ui/oxide/content.js';
   import 'tinymce/skins/content/default/content.js';
   ...
   import '@webspellchecker/wproofreader-tinymce/src/plugin.js';
   ...
   
   export function render() {
   	tinymce.init({
   		selector: '#editorElement',
   		plugins: '... wproofreader',
   		toolbar: '... wproofreader',
   		wproofreader: {
   			/* WProofreader config */
   		}
   	});
   };

2. Configure the plugin

   After installing the plugin, you need to configure it in the TinyMCE setup. The configuration is added to the wproofreader field. For a detailed list of available customization options, refer to Configuration reference.

   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
   	srcUrl: 'https://svc.webspellchecker.net/spellcheck31/wscbundle/wscbundle.js'
   }

   serviceId is a mandatory parameter for activating and using the plugin pointed to the Cloud-based version of WProofreader.

   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, it is required to specify the path to the backend entry point hosted on the client’s infrastructure.

Documentation

To find out more, refer to the following documentation:

• WProofreader Configuration reference
• TinyMCE Documentation

Reporting issues

We use GitHub Issues as the official public bug tracker for WProofreader plugin for TinyMCE. Here are some recommendations to take into account when reporting an issue:

• Provide steps which help us to reproduce an issue. A sample page or JSFiddle is always welcomed.
• Some issues may be browser and integration-specific. So, please specify what browser and integration you encountered the issue with.

Technical support or questions

Holders of an active subscription to the services or a commercial license have access to professional technical assistance directly from the support team. Contact us here.

License

Licensed under the terms of the MIT license. For full details about the license, please check the LICENSE.md file.