Versions Compared

Key

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

...

This guide outlines the main steps that you need to follow for initializing CKEditor initializing WProofreader in CKEditor 4 with WProofreader. 

...

...

1

...

Sign up for the trial or paid version here to get started with WProofreader Cloud. On the subscription, you will receive an email with your service ID and an activation key that is required for the WProofreader service activation. If you already have a service ID, one, you can skip this step.

...

iconfalse

...

.

...

Initialize CKEditor 4

Before integrating and configuring WProofreader, make sure CKEditor 4 is properly configured in your web application. To initialize CKEditor 4, follow the steps described in the  CKEditor 4 Quick Start Guide.

...

2. Initialize WProofreader

Choose one of the options below how to enable spelling and grammar checking functionality of WProofreader in CKEditor 4:.

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
languagejs
themeEmacs
<script>
    window.WEBSPELLCHECKER_CONFIG = {
        autoSearch: true,
		lang: 'auto', //enable language auto-detection option
		theme: 'gray', //adjust color theme of WProofreader to look more native to CKEditor 4
		enableAutoSearchIn: ['.cke_wysiwyg_frame'], //limit WProofreader work only to CKEditor 4. They hide the original element and create an iframe element with cke_wysiwyg_frame class.
		...
   };
</script>

<script type="text/javascript" src="http(s)://your_host_name/wscservice/wscbundle/wscbundle.js"></script>

Option B. Using the init

...

method

When using this method, WProofreader will be started on the

...

editor load.

Excerpt Include
IN:_include_initializing_wproofreader_using_init_in_ckeditor4_55x
IN:_include_initializing_wproofreader_using_init_in_ckeditor4_55x
nopaneltrue

3.  Specify additional server parameters

Excerpt Include
IN:_include_initialize_wproofreader_additional_server_parameters_server
IN:_include_initialize_wproofreader_additional_server_parameters_server
nopaneltrue

4. Remove old plugins

Note

Excerpt Include
IN:_include_remove_scayt_wsc_plugins_ckeditor4
IN:_include_remove_scayt_wsc_plugins_ckeditor4
nopaneltrue

5. Further actions

After completion of the initialization steps

...

Step 4. Further Actions

After you have initialized WProofreader in Froala Editor, you can customize WProofreader options, its user interface, and behavior using WProofreader customization options. More options and methods for advanced customization are available in API docs.

You can see the demo of CKEditor 4 integration on our website.

Excerpt Include
IN:_include_cloud_still_have_questions
IN:_include_cloud_still_have_questions
nopaneltrue

...

Can also be useful: