This guide outlines the main steps that you need to follow for initializing WProofreader in CKEditor 5.
Before integrating and configuring WProofreader, make sure CKEditor 5 is properly configured in your web application. To initialize CKEditor 5 follow the steps described in CKEditor 5 Quick Start guide.
Please skip this step if you are using CKEditor 5 v12.3.0 (2019-07-04) or higher. Now WProofreader automatically accesses the editor instance using the ckeditorInstanceproperty. |
If your are using CKEditor 5 versions below v12.3.0, you need to adjust initialization of CKEditor 5 and grant WProofreader access to it. To do so, add a link to CKEditor 5 instance object as shown in the example below.
<textarea name="content" id="editor">This is a sample text.</textarea> <script> ClassicEditor.create( document.querySelector('#editor') ).then((editor) => { editor.ui.getEditableElement('main').editor = editor; }); </script> |
Choose one of the options below how to enable spelling and grammar checking functionality of WProofreader in CKEditor 5.
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. Check a sample below or follow the steps described in the Get Started with WProofreader Server (autoSearch).
<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> |
When using this method, WProofreader will be started on the CKEditor 5 load.
Make sure you use have specified the following server-specific options in CONFIG which are instructing where spelling and grammar checking requests will be processed:
serviceProtocol: 'https', serviceHost: 'your_host_name', servicePort: '2880', servicePath: '/' |
After you have initialized WProofreader in CKEditor 5, you can customize WProofreader options, its user interface, and behavior using WProofreader Customization Options. You can see the demo of CKEditor 5 integration on our web site.