You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 22 Next »

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 Cloud version of WebSpellChecker Proofreader.

WProofreader add-on for rich text editors enables grammar and spell check, combining spelling and grammar suggestions while you type or work with your text in a floating dialog. 

Its auto-searching feature enables detecting new editable fields on the page and proofreading the text they contain automatically on hover selection. No additional actions or plugins are required for enabling WProofreader in a specific WYSIWYG editor or HTML editable element. A single configuration applies to almost all editors and controls. Here is the list of WProofreader supported integrations. 

0. Obtain Service ID

Sign up for the trial version to get started with WProofreader Cloud. Once you have subscribed, you will receive an email with your service ID, an activation key, required for the WProofreader service activation.

If you already have one, you can skip this step.

1. Add WSC Proofreader Script

Add the wscbundle.js script on your web page.

<script type="text/javascript" src="https://svc.webspellchecker.net/spellcheck31/wscbundle/wscbundle.js"></script>

2. Initialize WSC Proofreader in HTML Editable Elements

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

  • Specify your encrypted service ID. The required parameter for the Cloud WSC Proofreader service activation is serviceID. You must pass your service ID value received on the subscription to access the WSC Proofreader services.
serviceId: 'your-service-ID'
  • Adjust the default WSC Proofreader parameters. Check a full list of WebSpellChecker Proofreader API parameters and their possible values to adjust default WSC Proofreader settings and configure WSC Proofreader to fit your needs.

2.1. Contenteditable DIV Element

Initialize WProofreader in contenteditable <div> element using either 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,
        lang: 'en_US',
		serviceId: 'your-service-ID'
    });
</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 = {      
        serviceId: 'your-service-ID'
    };
</script>

2.2. Contenteditable IFRAME Element

Initialize WProofreader in contenteditable <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,
        lang: 'en_US',
        serviceId: 'your-service-ID'
    });
</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 = {
        serviceId: 'your-service-ID'
    };
</script>
Editable_doc.html example:
<html>
    <head>
        <title>WProofreader for Editable Controls</title>
    </head>
    <body contenteditable>This sampl text is aimed at demonstrating the work of WProofreader in a 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 WProofreader will recognized. click the underlined words and phras to see the suggestion options for correction.
    </body>
</html>

2.3. 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,
	lang: 'en_US',
	serviceId: 'your-service-ID'
	});
</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 = {
	serviceId: 'your-service-ID'
	};
</script>

2.4. 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.