WProofreader spelling and grammar check plugin for TinyMCE
npm install @webspellchecker/wproofreader-tinymceWProofreader 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.
* Install instructions
* Documentation
* Reporting issues
* Technical support or questions
* License
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.
``html
`
### 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.
`html
`
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.
`html
`
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.
`js
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:
`js`
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:
`js`
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.
To find out more, refer to the following documentation:
* WProofreader Configuration reference
* TinyMCE Documentation
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.
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.