Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Tip

Good to know:

  • Unlike CKEditor 4, where two WebSpellChecker plugins, SCAYT and WSC Dialog, are integrated by default and available under ABC button, there is no separate plugin for spelling and grammar check available in CKEditor 5.
  • WProofreader is a new ultimate multi-language proofreading tool. It provides both instant and on-click proofreading modes in a new convenient UI. It can be integrated with a wide range of various rich text editors, including CKEditor 5.

Step 1. Obtain

...

service ID

Excerpt Include
IN:_include_wsc_proofreader_cloud_subscribe_step
IN:_include_wsc_proofreader_cloud_subscribe_step
nopaneltrue

Step 2. Initialize CKEditor 5

Before integrating and configuring WProofreader, CKEditor should be properly configured in your web application. If you haven't done it yet, refer to Quick Start of the CKEditor 5 documentation pages for details.

Step 3. Grant WProofreader

...

access to CKEditor 5

...

instance

Adjust initialization of CKEditor 5 to grant WProofreader access to it. You need to add a link to CKEditor 5 instance object as shown in the example below.

Code Block
languagejs
themeEmacs
<textarea name="content" id="editor">This is a sample text.</textarea>
 
<script>
        ClassicEditor
            .create(document.querySelector('#editor'))
            .then(editor => {                 
			editor.element.querySelector('.ck-editor__editable').editor = editor;
            })
</script> 

Step 4. Initialize WProofreader

Now you need to enable WProofreader with the autoSearch feature. You can initialize WProofreader in your web app: using the config variable or inline data attributes.

Option A.

...

Initializing using config variable

1. Add

...

config with

...

options

Excerpt Include
IN:_include_wsc_proofreader_cloud_initialization_autosearch
IN:_include_wsc_proofreader_cloud_initialization_autosearch
nopaneltrue

2. Add WProofreader

...

script

Excerpt Include
IN:_include_cloud_webspellchecker_proofreader_src_url
IN:_include_cloud_webspellchecker_proofreader_src_url
nopaneltrue

Option B. Initializing using

...

inline data attributes

Excerpt Include
IN:_include_wsc_proofreader_cloud_initialization_autosearch_inline_data_attributes
IN:_include_wsc_proofreader_cloud_initialization_autosearch_inline_data_attributes
nopaneltrue

Step 5.  WProofreader for CKEditor 5 in

...

action

Check this short video to see how WProofreader works in a bundle with CKEditor 5.

...