Date: Fri, 29 Mar 2024 15:40:08 +0200 (EET) Message-ID: <1039152239.684.1711719608450@ip-172-30-3-56.ec2.internal> Subject: Exported From Confluence MIME-Version: 1.0 Content-Type: multipart/related; boundary="----=_Part_683_1234347037.1711719608446" ------=_Part_683_1234347037.1711719608446 Content-Type: text/html; charset=UTF-8 Content-Transfer-Encoding: quoted-printable Content-Location: file:///C:/exported.html
WProofreader add-on for rich text editors enables grammar and =
spell check, combining spelling and grammar suggestions while you type or w=
ork with your text in a floating dialog.
Its auto-searching feature enab= les detecting new editable fields on the page and proofreading the text the= y contain automatically on hover selection. No additional actions or plugin= s are required for enabling WProofreader in a specific WYSIWYG editor or HT= ML editable element. A single configuration applies to almost all= editors and controls. Here is the list of WProofreader supported integrations.
This guide outlines the main st= eps that you need to follow for initializing WProofreader in CKEditor = 4.
Sign up for the trial version to get started wit= h WProofreader Cloud. Once you have subscribed, you will receive an em= ail with your service ID, an activation key, required for the WProofre= ader service activation.
If you already have one, you can = ;skip this step.
Before integrating and configuring WP= roofreader, make sure CKEditor 4 is properly configured i= n your web application. To initialize CKEditor 4, follow the s= teps described in CK= Editor 4 Quick Start Guide.
Choose one of the options below how t= o enable spelling and grammar checking functionality of WProofreader in CKE= ditor 4.
When using this method, you nee= d a CONFIG and a wscbundle.js script. Aft= er setting up the autoSearch, WProofreader will be enabled= as soon as the editable container with CKEditor is in focus. Fol= low the steps described in the Get Started with WProofreade= r Cloud (autoSearch) or below.
<script> window.WEBSPELLCHECKER_CONFIG =3D { autoSearch: true, =09=09lang: 'auto', // enable language auto-detection option =09=09theme: 'gray', // adjust color theme of WProofreader to look more nat= ive to CKEditor 4 =09=09enableAutoSearchIn: ['.cke_wysiwyg_frame'], // limit WProofreader wor= k only to CKEditor 4. They hide the original element and create an iframe e= lement with cke_wysiwyg_frame class. serviceId: 'your-service-ID' // the activation key for the Cloud-ba= sed version }; </script> <script type=3D"text/javascript" src=3D"https://svc.webspellchecker.net/= spellcheck31/wscbundle/wscbundle.js"></script>
Option B.
When usi=
ng this method, WProofreader will be started on the CKEditor 4 load.
<!-- Include the WEBSPELLCHECKER_CONFI= G variable. --> <script> window.WEBSPELLCHECKER_CONFIG =3D { =09=09autoSearch: true, =09=09autoDestroy: true, =09=09...=09 }; </script> <script type=3D"text/javascript" src=3D"http(s)://host_name/wscservice/w= scbundle/wscbundle.js"></script> <!-- Use this path for the Cloud-based version <script type=3D"text/javascript" src=3D"https://svc.webspellchecker.net/= spellcheck31/wscbundle/wscbundle.js"></script> --> <div id=3D"ckeditor4-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.&= lt;/p> </div> <script> =09CKEDITOR.disableAutoInline =3D true; =09CKEDITOR.on('instanceReady', function(event) { =09=09var editor =3D event.editor; =09WEBSPELLCHECKER.init({ =09=09=09//catch both iframe and inline modes=20 =09container: editor.window.getFrame() ? editor.window.getFrame().$= : editor.element.$ =09=09}); =09}); =09 =09CKEDITOR.replace('ckeditor4-editor', {}); </script>
Remove SCAYT and WSC Dialog plugins f= or CKEditor 4 which are integrated by default to avoid any possible issues.= It can be done by adding the removePlugins parameter= to CKEditor config.js file:
config.removePlugin= s =3D 'scayt,wsc';
After you have initialized WPro= ofreader in CKEditor 4, you can customize WProofreader options, its user in= terface, and behavior using WProofreader customization options. = More options and methods for advanced customization are available in <= a class=3D"external-link" href=3D"https://webspellchecker.com/docs/api/wscb= undle/Options.html" rel=3D"nofollow" style=3D"text-decoration: none;">API d= ocs.
You can see the demo of CKEditor 4 integration on our web= site.
Please fe=
el free to contact our technical team