This guide outlines the main steps that you need to follow for initializing the universal WProofreader add-on for RTEs in CKEditor 5. It is a bit outdated method as there is a native integration (plugin) available. Check this Getting started with WProofreader plugin for CKEditor 5 instead.

This note is applicable for the WebSpellChecker package version before 5.10.0. In versions starting 5.10.0, we replaced the static dialog mode to the floating one.

WProofreader provides two modes for text proofreading: as you type in the editable area and in a separate dialog. The second mode with the dialog is a static mode where the editing is restricted to applying or rejecting changes suggested by WProofreader engine. There is no option that allows real-time text editing or synchronization in the dialog as this is available in as you type mode.  As a result, there is a list of modes and plugins of CKEditor 5 that are not compatible and contradict with the use of the dialog mode. You have to disable the dialog mode to avoid any confusion or unexpected behavior, if you are using one of the following modes or plugins of CKEditor 5: real-time collaboration features or multi-root editor. Check the details in the How to disable the dialog mode in WProofreader guide.

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

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> 

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).

<script>
    window.WEBSPELLCHECKER_CONFIG = {
		autoSearch: true,
		lang: 'en_US', // set the default language 
		...
	};
</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. 

Initializing WProofreader using init() in CKEditor 5

<!-- Include the WEBSPELLCHECKER_CONFIG variable. -->
<script>
    window.WEBSPELLCHECKER_CONFIG = {
		autoSearch: true,
		autoDestroy: true,
		...	
    };
</script>

<script type="text/javascript" src="https://your_host_name/wscservice/wscbundle/wscbundle.js"></script>

<div id="ckeditor5-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>
	ClassicEditor
    	.create(document.querySelector('#ckeditor5-editor'))
    	.then(editor => {
        	WEBSPELLCHECKER.init({
            	container: editor.ui._editableElements.get('main')
        	});
    	});
</script>

4.  Specify Additional Server Parameters

Make sure you 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: '443',
servicePath: 'virtual_directory/api' //by default the virtual directory name is wscservice

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.


Still have a question?

Please feel free to contact our technical team if you are having any difficulties with the configuration. 


Can be also useful: