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).
When using this method, WProofreader will be started on the CKEditor 5 load.
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.