Page History
...
This guide outlines the main steps that you need to follow for initializing WProofreader in CKEditor 4.
1. Obtain
...
service ID
Excerpt Include | ||||||
---|---|---|---|---|---|---|
|
...
Choose one of the options below how to enable spelling and grammar checking functionality of WProofreader in CKEditor 4.
Option A. Using autoSearch (the easiest)
When using this method, you need a CONFIG and a wscbundle.js script. After setting up the autoSearch, WProofreader will be enabled as soon as the editable container with CKEditor is in focus. Follow the steps described in the Get Started with WProofreader Cloud (autoSearch) or below.
...
To limit WProofreader work only to CKEditor 4, you can use the enableAutoSearchIn option where you need to indicate the class of CKEditor 4. They hide the original element and create an iframe element with cke_wysiwyg_frame class: <iframe class="cke_wysiwyg_frame"></iframe>.
Code Block | ||||
---|---|---|---|---|
| ||||
enableAutoSearchIn: ['.cke_wysiwyg_frame'], |
Code Block | ||||
---|---|---|---|---|
| ||||
<script>
window.WEBSPELLCHECKER_CONFIG = {
autoSearch: true,
lang: 'auto', // enable language auto-detection option
theme: 'gray', // adjust color theme of WProofreader to look more native to CKEditor 4
enableAutoSearchIn: ['.cke_wysiwyg_frame'], // limit WProofreader work only to CKEditor 4. They hide the original element and create an iframe element with cke_wysiwyg_frame class.
serviceId: 'your-service-ID' // the activation key for the Cloud-based version
};
</script>
<script type="text/javascript" src="https://svc.webspellchecker.net/spellcheck31/wscbundle/wscbundle.js"></script> |
Option B. Using the init
...
method
When using this method, WProofreader will be started on the CKEditor 4 load. Excerpt Include IN:_include_initializing_wproofreader_using_init_in_ckeditor4_55x IN:_include_initializing_wproofreader_using_init_in_ckeditor4_55x nopanel true
4
...
To activate the Cloud version of WProofreader, you are required to add serviceId option to the CONFIG with your activation key and specify the correct path to the wscbundle.js file on our Cloud.
Code Block | ||||
---|---|---|---|---|
| ||||
serviceId: 'your-service-ID' |
Update the path to WProofreader wscbundle.js file in case of the Cloud version as follows:
Code Block | ||||
---|---|---|---|---|
| ||||
<script type="text/javascript" src="https://svc.webspellchecker.net/spellcheck31/wscbundle/wscbundle.js"></script> |
...
. Remove old plugins
Note | ||||||||
---|---|---|---|---|---|---|---|---|
|
...
5. Further
...
actions
After you have initialized WProofreader in CKEditor 4, you can customize WProofreader options, its user interface, and behavior using WProofreader Customization Options. You customization options. More options and methods for advanced customization are available in API docs.
You can see the demo of CKEditor 4 integration on our web sitewebsite.
Excerpt Include IN:_include_cloud_still_have_questions IN:_include_cloud_still_have_questions nopanel true