This guide outlines the main steps that you need to follow for initializing CKEditor 4 with WProofreader.
Step 1. Initialize CKEditor 4
Before integrating and configuring WProofreader, make sure CKEditor 4 is properly configured in your web application. To initialize CKEditor 4, follow the steps described in the .
Step 2. Initialize WProofreader
Choose one of the options below how to enable spelling and grammar checking functionality of WProofreader in CKEditor 4:
Using autoSearch
When using this method, you need a CONFIG and a wscbundle script.<script> window.WEBSPELLCHECKER_CONFIG = { autoSearch:true, lang: 'uk_UA', ... }; </script> <script type="text/javascript" src="http(s)://your_host_name/wscservice/wscbundle/wscbundle.js"></script>
After setting up the autoSearch, WProofreader will be enabled as soon as the editable container with CKEditor is in focus.
- Using init() method
Initializing WProofreader using init() in CKEditor 4
<!-- Include the WEBSPELLCHECKER_CONFIG variable. --> <script> window.WEBSPELLCHECKER_CONFIG = { autoSearch: true, autoDestroy: true, ... }; </script> <script type="text/javascript" src="http(s)://host_name/wscservice/wscbundle/wscbundle.js"></script> <!-- Use this path for the Cloud-based version <script type="text/javascript" src="https://svc.webspellchecker.net/spellcheck31/wscbundle/wscbundle.js"></script> --> <div id="ckeditor4-editor"> <p>These are an examples of a sentences with two mispelled words and grammar problems. Just type text with misspelling to see how it works.</p> </div> <script> CKEDITOR.disableAutoInline = true; CKEDITOR.on('instanceReady', function(event) { var editor = event.editor; WEBSPELLCHECKER.init({ //catch both iframe and inline modes container: editor.window.getFrame() ? editor.window.getFrame().$ : editor.element.$ }); }); CKEDITOR.replace('ckeditor4-editor', {}); </script>
When using this method, WProofreader will be started on the CKEditor 4 load.
Step 3. Further Actions
After you have initialized WProofreader in CKEditor 4, you can customize WProofreader options, its user interface, and behavior.