Page History
...
This guide outlines the main steps that you need to follow for initializing WProofreader in CKEditor 5.
1. Initialize 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.
2. Grant WProofreader Access to CKEditor 5 Instance
Note |
---|
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.
Code Block | ||||
---|---|---|---|---|
| ||||
<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> |
3. Initialize WProofreader
Choose one of the options below how to enable spelling and grammar checking functionality of WProofreader in CKEditor 5.
Option A. Using autoSearch
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).
Code Block | ||||
---|---|---|---|---|
| ||||
<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> |
Option В. Using init() method
When using this method, WProofreader will be started on the CKEditor 5 load.
Excerpt Include IN:_include_initializing_wproofreader_using_init_in_ckeditor5_55x IN:_include_initializing_wproofreader_using_init_in_ckeditor5_55x nopanel true
...
4. Specify Additional Server Parameters
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:
Code Block | ||||
---|---|---|---|---|
| ||||
serviceProtocol: 'https', serviceHost: 'your_host_name', servicePort: '2880', servicePath: '/' |
...
5. Further Actions
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.
Excerpt Include IN:_include_cloud_still_have_questions IN:_include_cloud_still_have_questions nopanel true
...
Can be also useful:
...