There are two ways to create an instance of CWI:

• Use a script within the HTML document containing the code to instantiate CWI
• Include a reference to Javascript file containing the code to instantiate CWI

If you decide to choose the last option the code shown below goes into a JavaScript file.

Let's have a look at the code and discuss the different parameters.

<script>
        var host = [hostname];
        var user = [username];
        var pw = [password];
        var congree = window.Congree || {};
        window.Congree = congree;

        congree.loadSidebar = function (user, pw) {
           
            congree.sidebar = new Congree.Sidebar({
                serverAddress: "[hostname]/Congree",
                authentication: {
                    userName: user,
                    password: pw,
                    accessTokenURL: "[hostname]/congreeidentityserver/connect/token",
                    loginType: "[authentication type]"
                },
               
                initialRuleSetName: "[ruleset]",
                requestValidTerms: [term requests],
                culture: "[culture]",
                editors: [
                    Congree.AdapterFor.TextInput([DOM selector], [Name for Linguistic Engine]),
                    Congree.AdapterFor.TextInput([DOM selectors], [Name for Lingiustic Engine]),

                    Congree.AdapterFor.CKEditor4([DOM selector], [Name for Linguistic Engine])
                ]
            });
            congree.sidebar.show([Congree Sidebar root]);
        };
       
	};

Initialization parameters

CWI Adapters

In order to be able to handle different elements and structures within an HTML page CWI comes along with a couple of different adapters:

• Congree.AdapterFor.TextInput for the HTML elements input and textarea
• Congree.AdapterFor.TextCKEditor4 for CKEditor
• Congree.AdapterFor.TinyMCE for TinyMce
• Congree.AdapterFor.Xyleme for Xyleme

Invoking one ore more adapters will force CWI to listen to those structures and subscribing to events onchange and onselection. Any modification withing those stuctures will invoke a lingusitic checks of the contents wihin those elements.

To specifiy the contents to be checked further it is possible to pass DOM selectors as the first parameter. DOM selectors can be elements names, css class names or id values.

<textarea id="summary">Check this content</textarea>
<textarea class="help">Check this text too</textarea>
<textarea>Do not check this text.</textarea>

To check the contents in the textarea elements shown in the code above the setting would look like this:

 Congree.AdapterFor.TextInput('#summary'),
 Congree.AdapterFor.TextInput('.help'),

The third textarea is not being treated as there is no setting forcing CWI to take care of it.

If nothing else is specified CWI passes a generic XML node to Congree's Linguistic Engine created based on the elements in the source. For the examples above the XML node passed looks like this:

<doc><text>Check this content.</text></text>Check this text too.<text></doc>

To be able to distinguish the semantics of the elements and to allow for a context specific check it is possible to pass a second parameter to the adapters defining the name of the element to be used when the content is passed to the Linguistic Engine.

 Congree.AdapterFor.TextInput('#summary', 'summary'),
 Congree.AdapterFor.TextInput('.help', 'summary'),

Using the code above the content passed to the Linguistice Engine will look like this:

<doc><summary>Check this content.</summary><help>Check this text too.</help></doc>