This guide outlines the main steps that you need to follow in order to integrate and configure a new WebSpellChecker Proofreader for Editable Controls with HTML contenteditable elements such as div, textarea, iframe, etc. All the described steps are provided for the Server version of WebSpellChecker Proofreader.

Good to know:

  • WebSpellChecker Proofreader is a standalone control based on the SpellCheckAsYouType (SCAYT) product that is used for spell and grammar checking, proofreading as you type, of single-line or multiline HTML elements and can be integrated with such editable controls as textarea and input, controls with a contenteditable attribute and iframe.

1. Add WebSpellChecker Proofreader Script

Add the WProofreader script to your web page using the following script:

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

2. Initialize WebSpellChecker Proofreader in HTML Editable Elements

The next step is to initialize the WebSpellChecker Proofreader functionality for chosen elements and define the required parameters. Below you will find examples of WebSpellChecker Proofreader initialization in div, iframe, input and textarea elements.

  • Adjust the default WebSpellChecker Proofreader parameters. Check a full list of WebSpellChecker Proofreader API parameters and their possible values to adjust default WebSpellChecker Proofreader settings and configure WebSpellChecker Proofreader to fit your needs.

In order to configure secure SSL connection between your application and AppServer, it is also required to perform the additional steps as described on the Setup SSL Connection with AppServer page.

2.1. Contenteditable DIV Element

 Expand to see examples of WebSpellChecker Proofreader initialization in contenteditable <div> element...

Initialize WProofreader in contenteditable <div> element using either an imperative or declarative notation as it is shown in the examples below.

WProofreader (Imperative Notation):
<div contenteditable id="container1">
This sampl text is aimed at demonstrating the work of WProofreader in a contenteditable div element. 
WProofreader will find all your speling and grammar mistakes as you type and suggest how to correct them. 
Type your text here or use this one too see an few of of the problems that WProofreader will recognized. 
Click the underlined words and phras to see the suggestion options for correction.
</div>
 
<script>
    var instance1 = WEBSPELLCHECKER.init({
        container: document.getElementById("container1"),
        autoStartup: true,
		enableGrammar: true,
        lang: 'en_US',
        serviceProtocol: 'https',
        serviceHost: 'your_host_name',
 	    servicePort: '2880',
        servicePath: '/'
    });
</script>
WProofreader (Declarative Notation):
<div contenteditable id="container2" data-wsc-autocreate="true" data-wsc-lang="en_US">
This sampl text is aimed at demonstrating the work of WProofreader in a plain textarea element. 
WProofreader will find all your speling and grammar mistakes as you type and suggest how to correct them. 
Type your text here or use this one too see an few of of the problems that WProofreader will recognized. 
Click the underlined words and phras to see the suggestion options for correction.
</div>

<script>
    window.WEBSPELLCHECKER_CONFIG = {
		enableGrammar: true,        
 	    serviceProtocol: 'https',
        serviceHost: 'your_host_name',
        servicePort: '2880',
        servicePath: '/'
    };
</script>

2.2. Contenteditable IFRAME Element

 Expand to see examples of WebSpellChecker Proofreader initialization in contenteditable <iframe> element...

Initialize the WProofreader in content-editable <iframe> element using either imperative or declarative notation as it is shown in the examples below.

WProofreader (Imperative Notation):
<iframe id="container3" src="editable_doc.html"></iframe>
 
<script>
    var instance3 = WEBSPELLCHECKER.init({
        container: document.getElementById("container3"),
        autoStartup: true,
		enableGrammar: true,
        lang: 'en_US',
        serviceProtocol: 'https',
        serviceHost: 'your_host_name',
        servicePort: '2880',
        servicePath: '/'
    });
</script>
WProofreader (Declarative Notation):
<iframe id="container4" data-wsc-autocreate="true" data-wsc-lang="en_US" src="editable_doc.html"></iframe>

<script>
    window.WEBSPELLCHECKER_CONFIG = {
		enableGrammar: true,
        serviceProtocol: 'https',
        serviceHost: 'your_host_name',
        servicePort: '2880',
        servicePath: '/'
    };
</script>

Editable_doc.html example:
<html>
    <head>
        <title>WProofreader for HTML Editable Controls</title>
    </head>
    <body contenteditable>This sampl text is aimed at demonstrating the work of WProofreader in an iframe element. 
WProofreader will find all your speling and grammar mistakes as you type and suggest how to correct them. 
Type your text here or use this one too see an few of of the problems that SCAYT will recognized. 
Click the underlined words and phras to see the suggestion options for correction.
    </body>
</html>

2.3. Contenteditable INPUT Element

 Expand to see examples of WebSpellChecker Proofreader initialization in contenteditable <input> element...

Initialize WProofreader in <input> element using either imperative or declarative notation as it is shown in the examples below.

WProofreader (Imperative Notation):
<input id="container5" type="text" value="This sampl text is aimed at demonstrating the work of WProofreader in a input textform element. 
WProofreader will find all your speling and grammar mistakes as you type and suggest how to correct them. 
Type your text here or use this one too see an few of of the problems that WProofreader will recognized. 
Click the underlined words and phras to see the suggestion options for correction.">

<script>
	var instance5 = WEBSPELLCHECKER.init({
	container: document.getElementById("container5"),
	autoStartup: true,
	enableGrammar: true,
	lang: 'en_US',
	serviceProtocol: 'https',
	serviceHost: 'your_host_name',
	servicePort: '2880',
	servicePath: '/'
	});
</script>
WProofreader (Declarative Notation):
<input id="container6" data-wsc-autocreate="true" data-wsc-lang="en_US" type="text" value="This sampl text is aimed at demonstrating the work of WProofreader 
in a input textform element. WProofreader will find all your speling and grammar mistakes as you type and suggest how to correct them. 
Type your text here or use this one too see an few of of the problems that WProofreader will recognized. 
Click the underlined words and phras to see the suggestion options for correction.">

<script>
	window.WEBSPELLCHECKER_CONFIG = {
	enableGrammar: true,
	serviceProtocol: 'https',
	serviceHost: 'your_host_name',
	servicePort: '2880',
	servicePath: '/'
	};
</script> 
 

2.4. Contenteditable TEXTAREA Element

 Expand to see examples of WebSpellChecker Proofreader initialization in contenteditable <textarea> element...

Initialize WProofreader in <textarea> element using either imperative or declarative notation as it is shown in the examples below.

WProofreader (Imperative Notation):
<textarea id="container7" type="text">This sampl text is aimed at demonstrating the work of WProofreader in a textarea textform element. WProofreader will find all your speling and grammar mistakes as you type and suggest how to correct them. Type your text here or use this one too see an few of of the problems that WProofreader will recognized. click the underlined words and phras to see the suggestion options for correction.
</textarea>
 
<script>
	var instance7 = WEBSPELLCHECKER.init({
	container: document.getElementById("container7"),
	autoStartup: true,
	lang: 'en_US',
	serviceId: 'your-service-ID'
	});
</script>
WProofreader (Declarative Notation):
<textarea id="container8" data-wsc-autocreate="true" data-wsc-lang="en_US" type="text">This sampl text is aimed at demonstrating the work of WProofreader in a textarea textform element. WProofreader will find all your speling and grammar mistakes as you type and suggest how to correct them. Type your text here or use this one too see an few of of the problems that WProofreader will recognized. click the underlined words and phras to see the suggestion options for correction.
</textarea>

<script>
	window.WEBSPELLCHECKER_CONFIG = {
	serviceId: 'your-service-ID'
    };
</script> 
 

Check a demo page with WebSpellChecker Proofreader for Editable Controls on our website.



Can be also useful:

  • No labels