Initialization options

WProofreader can be initialized in several ways depending on your integration scenario. This page explains the supported methods and shows how to apply them in practice.

The WEBSPELLCHECKER_CONFIG (referred to as CONFIG) can be defined in a script or loaded from a file as described in the SDK overview.

Once initialized, you can further adjust behavior and UI using the configuration reference.

👉 See demos for working examples with different editors and HTML elements.

---

Initialize using autoSearch

The autoSearch feature detects new editable fields on the page and enables proofreading when the field is focused.

• Useful for pages with multiple controls.

• Improves performance by checking only the active field.

• Frees memory when fields are removed or hidden, preventing leaks.

• Proofreading starts only when a field receives focus.

Example: using CONFIG

<script>
  window.WEBSPELLCHECKER_CONFIG = {
    autoSearch: true,
    lang: 'en_US',
    ...
  };
</script>

<!-- Cloud version -->
<script src="https://svc.webspellchecker.net/spellcheck31/wscbundle/wscbundle.js"></script>
<!-- Self-hosted version -->
<!-- <script src="http(s)://your_host_name/wscservice/wscbundle/wscbundle.js"></script> -->

Example: using inline data attributes

<script
  data-wsc-autosearch="true"
  data-wsc-lang="en_US"
  ...
  src="https://svc.webspellchecker.net/spellcheck31/wscbundle/wscbundle.js">
</script>

<!-- Self-hosted alternative:
<script
  data-wsc-autosearch="true"
  data-wsc-lang="en_US"
  ...
  src="http(s)://your_host_name/wscservice/wscbundle/wscbundle.js">
</script>
-->

Inline data attributes don’t support some options (for example, actionItems, suggestionsCount, moreSuggestionsCount). Use CONFIG for full configuration.

---

Initialize using init() method

Use init() when you want explicit control over where WProofreader is enabled.

• Suitable for static pages where controls are known in advance.

• Instances are created on page load.

• With dynamic content, you must manage when to create or destroy instances.

• Proofreading is enabled immediately. It doesn’t require focus or selection, unlike with autoSearch.

Example: single HTML element

<div contenteditable id="container1">
  <p>This sample text demonstrates WProofreader in a contenteditable div element.</p>
</div>

<script>
  var instance1 = WEBSPELLCHECKER.init({
    container: document.getElementById('container1'),
    lang: 'en_US',
    ...
  });
</script>

<!-- Cloud version -->
<script src="https://svc.webspellchecker.net/spellcheck31/wscbundle/wscbundle.js"></script>
<!-- Self-hosted version -->
<!-- <script src="http(s)://your_host_name/wscservice/wscbundle/wscbundle.js"></script> -->

Example: multiple elements

For multiple fields (such as a div and a textarea), define CONFIG once and call init() for each target element.

👉 See the demo for HTML controls.

Example: rich text editors

For editors such as CKEditor 4, Froala, or Quill, initialization usually combines autoSearch, autoDestroy, and init():

• init() ensures WProofreader is explicitly attached to the editor’s editable container.

• autoSearch restores the instance dynamically (for example, when switching between editing modes).

• autoDestroy removes the instance when the editable container is deleted or hidden, preventing memory leaks.

This combination is useful when switching between editing modes (for example, toggling between WYSIWYG and code view). In such cases, WProofreader must be destroyed in one mode and restored automatically when the user switches back.

👉 See the demo with CKEditor 4, Froala, or Quill.

---

Initialize using data-wsc-autocreate

Mark elements with data-wsc-autocreate="true" to create instances automatically. Element-level attributes can override global CONFIG settings.

Example: HTML elements

<script>
  window.WEBSPELLCHECKER_CONFIG = {
    lang: 'en_US'
  };
</script>

<div contenteditable data-wsc-autocreate="true">
  <p>This sample text demonstrates WProofreader in a div.</p>
</div>

<textarea data-wsc-autocreate="true" data-wsc-lang="es_ES">
  This sample text demonstrates WProofreader in a textarea.
</textarea>

<!-- Cloud version -->
<script src="https://svc.webspellchecker.net/spellcheck31/wscbundle/wscbundle.js"></script>
<!-- Self-hosted version -->
<!-- <script src="http(s)://your_host_name/wscservice/wscbundle/wscbundle.js"></script> -->

In this example, the textarea uses Spanish (es_ES) because element attributes override the global lang setting.

---

Related resources

• Configuration reference — full list of available options.

• JavaScript SDK on npm and GitHub repository — includes framework examples with CKEditor 4, TinyMCE, Froala, and Quill in Vue, React, and Angular.

• Demos