Date: Thu, 28 Mar 2024 18:18:21 +0200 (EET) Message-ID: <1762997737.614.1711642701245@ip-172-30-3-56.ec2.internal> Subject: Exported From Confluence MIME-Version: 1.0 Content-Type: multipart/related; boundary="----=_Part_613_543250445.1711642701240" ------=_Part_613_543250445.1711642701240 Content-Type: text/html; charset=UTF-8 Content-Transfer-Encoding: quoted-printable Content-Location: file:///C:/exported.html
There are several options letting you= initialize WProofreader functionality in your web app, namely using: =
The WEBSPELLCHECKER_CONFIG (fur= ther CONFIG) can be added in a script or loaded from the file as mentioned = in Get Started with WPr= oofreader Server (autoSearch) guide for Server version and Get Started with WProofreader Cloud= (autoSearch).
After you have initialized WPro= ofreader, you can customize the above-mentioned settings using WProofreader API.
Below you can find the samples = showing how different WProofreader initialization approaches work depending= on the integration and expected launch behavior.
The autoSearch featu= re enables detecting new editable fields on the page and proofreading the t= ext they contain automatically in focus. If you choose this option, WProofr= eader is enabled in the selected WYSIWYG editor or HTML editable control, a= nd no additional actions are required.
Initialization using inline attribute= s is suitable and useful if you want to have a single script with basic opt= ion definitions.
This is an example of the WProo= freader initialization with the autoSearch functionality turned on. All the= configuration options are defined using CONFIG.
<script> window.WEBSPELLCHECKER_CONFIG =3D { =09=09autoSearch:true, =09=09lang: 'uk_UA', =09=09... =09}; </script> <script type=3D"text/javascript" src=3D"http(s)://your_host_name/wscserv= ice/wscbundle/wscbundle.js"></script>
This is an example of the WProo= freader initialization with the autoSearch functionality turned on. All the= configuration options are defined using inline data attributes. In this case, the naming = of the options are formed as follows: data-wsc-option_name=3D=E2=80= =9Dvalue=E2=80=9D. For details, refer to the list of available options in WProofreader API document= ation.
<script =09data-wsc-autosearch=3D"true" =09data-wsc-lang=3D"uk_UA" =09... src=3D"https://your_host_name/wscservice/wscbundle/wscbundle.js"> </script>
When initializing using data attribut=
es, a number of API parameters with array or numbe=
r type are not supported. Thus, you cannot modify such parameters =
as actionItems, suggestionsCount, and
The init() method is= a reasonable choice when you clearly know in which control you want to ini= tialize WProofreader. More than that you are aware of your page controls, a= nd additional controls do not appear dynamically.
This is an example of WP= roofreader initialization in HTML contenteditable element (div) using init() method. The configuration options are s= pecified directly in the init() function.
<script type=3D"= text/javascript" src=3D"http(s)://your_host_name/wscservice/wscbundle/wscbu= ndle.js"></script> <div contenteditable id=3D"container1"> =09<p>This sampl text is aimed at demonstrating the work of WProofrea= der in a contenteditable div element.</p> </div> =20 <script> var instance1 =3D WEBSPELLCHECKER.init({ =09=09container: document.getElementById("container1"), =09=09lang: 'uk_UA', =09=09... =09}); </script>
This is an example of WProofrea= der initialization in HTML contenteditable element (div) a= nd HTML editable element (textarea) using init()= strong> method. The configuration options for both controls are defined sep= arately in a single CONFIG.
<script> =09window.WEBSPELLCHECKER_CONFIG =3D { =09=09lang: 'uk_UA', =09=09... }; </script> <script type=3D"text/javascript" src=3D"http(s)://your_host_name/wscserv= ice/wscbundle/wscbundle.js"></script> <div contenteditable id=3D"container1"> =09<p>This sampl text is aimed at demonstrating the work of WProofrea= der in a contenteditable div element.</p> </div> <script> var instance1 =3D WEBSPELLCHECKER.init({ =09=09container: document.getElementById("container1"), =09}); </script> <textarea id=3D"container2" type=3D"text">This sampl text is aimed at= demonstrating the work of WProofreader in a textarea textform element.<= /textarea> =20 <script> var instance2 =3D WEBSPELLCHECKER.init({ =09=09container: document.getElementById("container2"), =09}); </script>
There is an option to explicitly init= ialize WProofreader in such rich text editors as Froala Editor 3, CKEditor 4, and CKEditor 5 using = init() method. However, it is strongly recommended to use = this method with autoSearch and autoDestroy options in CONFIG.
Turned on/enabled
<!-- Include the= WEBSPELLCHECKER_CONFIG 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>
<!-- Include the= WEBSPELLCHECKER_CONFIG variable. --> <script> window.WEBSPELLCHECKER_CONFIG =3D { =09=09autoSearch: true, =09=09autoDestroy: true, =09=09...=09 }; </script> <script type=3D"text/javascript" src=3D"https://your_host_name/wscservic= e/wscbundle/wscbundle.js"></script> <div id=3D"ckeditor5-editor"> =09<p>These are an examples of a sentences with two mispelled words a= nd grammar problems. Just type text with misspelling to see how it works.&l= t;/p> </div> <script> =09ClassicEditor =09.create(document.querySelector('#ckeditor5-editor')) =09.then(editor =3D> { =09WEBSPELLCHECKER.init({ =09container: editor.ui._editableElements.get('main') =09}); =09}); </script>
<!-- Include the= WEBSPELLCHECKER_CONFIG variable. --> <script> window.WEBSPELLCHECKER_CONFIG =3D { =09=09autoSearch: true, =09=09autoDestroy: true, =09=09...=09 }; </script> <script type=3D"text/javascript" src=3D"https://your_host_name/wscservic= e/wscbundle/wscbundle.js"></script> <div id=3D"froala-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> new FroalaEditor('#froala-editor', { =09=09iframe: true, events: { 'initialized': function() { WEBSPELLCHECKER.init({ container: this.$iframe ? this.$iframe[0] : this.el }); } } }); </script>
This approach is similar to initializ= ing WProofreader using init() method.
This is an example of WProofreader in= itialization in HTML contenteditable element (div) and HTM= L editable element (textarea) using data-wsc-autoc= reate=3D"true". The configuration options are to be defined separa= tely in CONFIG.
Even though we have a CONFIG wh= ere we defined Ukrainian as a language for check, the language for textarea= will be obtained from the data-wsc-lang=3D"es_ES" setting. It will h= ave higher priority and, thus, will rewrite the CONFIG settings in the samp= le below.
<script> window.WEBSPELLCHECKER_CONFIG =3D { lang:=E2=80=99uk_UA=E2=80= =99, }; </script> <script type=3D"text/javascript" src=3D"http(s)://your_host_name/wscserv= ice/wscbundle/wscbundle.js"></script> <div contenteditable data-wsc-autocreate=3D"true"> =09<p>This sampl text is aimed at demonstrating the work of WProofrea= der in a plain textarea element.</p> </div> <textarea type=3D"text" data-wsc-autocreate=3D"true" data-wsc-lang=3D"es= _ES">This sampl text is aimed at demonstrating the work of WProofreader = in a textarea textform element.</textarea>