HTML editable elements

This guide covers how to enable WProofreader in standard HTML editable elements: <textarea>, <div contenteditable>, <iframe>, and <input>. It applies to both Cloud and self-hosted deployments.

For rich text editors like TinyMCE, CKEditor, or Froala, refer to the dedicated editor integration guides.

See HTML controls demo | See mixed controls demo

Prerequisites

You'll need an active WProofreader subscription or trial. Sign up for a free trial or choose a plan

For the Cloud version, you'll need a Service ID. You can find it on the Credentials page in the admin panel after signing up. For self-hosted, you'll need the endpoint of your WProofreader application (protocol, host, port, and path) to specify in the configuration parameters.

Supported elements

WProofreader works with the following HTML elements:

Element

Notes

<textarea>

Supported by default with autoSearch.

<div contenteditable>

Supported by default with autoSearch.

<iframe>

The iframe document must have contenteditable set on the <body> or a child element.

<input>

Disabled by default with autoSearch. Requires enableAutoSearchIn: ['input'] or explicit init().

Using autoSearch

The simplest approach. Add the WProofreader config and script to your page. WProofreader will activate automatically when a user focuses on any supported editable element.

For setup instructions, refer to the Initialize using autoSearch guide.

Using init()

Use init() when you want proofreading to start immediately on a specific element without waiting for focus.

Textarea

<textarea id="my-textarea">Your text here.</textarea>

<script>
  var instance = WEBSPELLCHECKER.init({
    container: document.getElementById('my-textarea')
  });
</script>

Contenteditable div

<div contenteditable id="my-div">
  <p>Your text here.</p>
</div>

<script>
  var instance = WEBSPELLCHECKER.init({
    container: document.getElementById('my-div')
  });
</script>

Iframe

The iframe must contain an editable document. Point the container to the iframe element itself.

<iframe id="my-iframe" src="editable-page.html"></iframe>

<script>
  var instance = WEBSPELLCHECKER.init({
    container: document.getElementById('my-iframe')
  });
</script>

The editable-page.html file should have contenteditable on the <body>:

<html>
<body contenteditable>
  Your text here.
</body>
</html>

Input

<input> elements aren't covered by autoSearch by default. Use init() to enable proofreading on a specific input:

<input id="my-input" type="text" value="Your text here.">

<script>
  var instance = WEBSPELLCHECKER.init({
    container: document.getElementById('my-input')
  });
</script>

To enable autoSearch for all <input> elements on the page, add enableAutoSearchIn: ['input'] to your config.

Using data-wsc-autocreate

You can also mark elements with data-wsc-autocreate="true" to initialize WProofreader automatically on page load without requiring focus. Element-level attributes can override global config settings.

html

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

<div contenteditable data-wsc-autocreate="true">
  <p>Your text here.</p>
</div>

<textarea data-wsc-autocreate="true" data-wsc-lang="es_ES">
  Your text here.
</textarea>

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

For details on this and other initialization methods, refer to the Initialization options guide.

Multiple elements on one page

You can initialize WProofreader on multiple elements. Define the config once and call init() for each element:

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

<div contenteditable id="editor1"><p>First editor.</p></div>
<textarea id="editor2">Second editor.</textarea>

<script>
  var instance1 = WEBSPELLCHECKER.init({
    container: document.getElementById('editor1')
  });

  var instance2 = WEBSPELLCHECKER.init({
    container: document.getElementById('editor2')
  });
</script>

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

Alternatively, use autoSearch: true in the config and WProofreader will handle all editable elements automatically as they receive focus.

NPM SDK integration

The WProofreader SDK npm package is a universal integration method that works with any HTML element. It's a good fit for JavaScript framework projects (React, Angular, Vue).

For setup instructions, refer to the Initialize using npm SDK guide.

What's next

Configuration options to customize behavior, UI, languages, and dictionaries.
Configuration reference for the full list of parameters.
Features overview to explore all WProofreader capabilities.
Demos to see working examples.

PreviousTinyMCE 6+NextLegacy SCAYT

Was this helpful?

hashtagPrerequisites

hashtagSupported elements

hashtagUsing autoSearch

hashtagUsing init()

hashtagTextarea

hashtagContenteditable div

hashtagIframe

hashtagInput

hashtagUsing data-wsc-autocreate

hashtagMultiple elements on one page

hashtagNPM SDK integration

hashtagWhat's next