HTML editable elements

This guide outlines the main steps to initialize WProofreader in HTML editable elements such as <input> and <textarea>, and HTML contenteditable elements such as <div>, <iframe> and etc. All the steps described are provided for the Cloud version of WProofreader.

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.

1. Obtain activation key

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.

2. Activate service

Make sure you have specified the options, which are instructing where spelling and grammar checking requests will be processed.

To activate the Cloud version of WProofreader, you are required to add serviceId option to the CONFIG with your activation key and specify the correct path to the wscbundle.js file on our Cloud.

<script>
    window.WEBSPELLCHECKER_CONFIG = {
        ...
        serviceId: 'your-service-ID'
        ...
        };
</script>
<script type="text/javascript" src="https://svc.webspellchecker.net/spellcheck31/wscbundle/wscbundle.js"></script>

Meanwhile to activate the on-premise version of WProofreader you have to specify the server parameters and appropriate path to wscbundle.js file on your server.

<script>
    window.WEBSPELLCHECKER_CONFIG = {
        ...
        serviceProtocol:'https', 
        serviceHost:'your_host_name',
        servicePort:'your_port_number',
        servicePath:'virtual_directory/api' //by default the virtual directory name is wscservice
        ...
    };
</script>
<script type="text/javascript" src="http(s)://host_name/wscservice/wscbundle/wscbundle.js"></script>

3. Initialize WProofreader

Below you will find examples of initialization in contenteditable elements such <div> and <iframe> and editable elements such as <input> and<textarea>.

3.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 WProofreaderin 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 usethis one too see an few of of the problems that WProofreader will recognized. click the underlined words and phras to see the suggestion optionsfor correction.
</div>
  
<script>
    var instance1 = WEBSPELLCHECKER.init({
        container: document.getElementById("container1"),
        autoStartup:true,
        lang:'en_US',
        <!--Use the activation key for the Cloud-based version
        serviceId: 'your-service-ID'
        -->
        <!-- Use four server parameters for the On-premise version
        serviceProtocol:'https', 
        serviceHost:'your_host_name',
        servicePort:'your_port_number',
        servicePath:'virtual_directory/api' //by default the virtual directory name is wscservice
        -->
    });
</script>

<!-- Use this path for the On-premise version
<script type="text/javascript" src="http(s)://host_name/wscservice/wscbundle/wscbundle.js"></script>
-->
<!-- Use this path for the Cloud-based version
<script type="text/javascript" src="https://svc.webspellchecker.net/spellcheck31/wscbundle/wscbundle.js"></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 WProofreaderin 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 usethis one too see an few of of the problems that WProofreader will recognized. click the underlined words and phras to see the suggestion optionsfor correction.
</div>
 
<script>
    window.WEBSPELLCHECKER_CONFIG = {     
        <!--Use the activation key for the Cloud-based version
        serviceId: 'your-service-ID'
        -->
        <!-- Use four server parameters for the On-premise version
        serviceProtocol:'https', 
        serviceHost:'your_host_name',
        servicePort:'your_port_number',
        servicePath:'virtual_directory/api' //by default the virtual directory name is wscservice
        -->
    };
</script>

<!-- Use this path for the On-premise version
<script type="text/javascript" src="http(s)://host_name/wscservice/wscbundle/wscbundle.js"></script>
-->
<!-- Use this path for the Cloud-based version
<script type="text/javascript" src="https://svc.webspellchecker.net/spellcheck31/wscbundle/wscbundle.js"></script>
-->

3.2. Contenteditable IFRAME element

3.3. INPUT element

3.4. TEXTAREA element

4. Adjust default options

You can adjust the default options for your needs. Here is a full list of WProofreader customization options and their possible values.

Check a demo page with the WProofreader initialization in HTML controls on our website.

---