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

{% hint style="info" %}
Once initialized, you can further adjust behavior and UI using the [configuration reference](https://webspellchecker.com/docs/api/wscbundle/Options.html).
{% endhint %}

👉 See [demos](https://demos.webspellchecker.com/) 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

{% code overflow="wrap" fullWidth="true" %}

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

{% endcode %}

{% code overflow="wrap" fullWidth="true" %}

```html
<!-- 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> -->
```

{% endcode %}

#### Example: using inline data attributes

{% code overflow="wrap" fullWidth="true" %}

```html
<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>
-->
```

{% endcode %}

{% hint style="warning" %}
Inline data attributes don’t support some options (for example, `actionItems`, `suggestionsCount`, `moreSuggestionsCount`). Use CONFIG for full configuration.
{% endhint %}

***

### 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

{% code overflow="wrap" fullWidth="true" %}

```html
<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>
```

{% endcode %}

{% code overflow="wrap" fullWidth="true" %}

```html
<!-- 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> -->
```

{% endcode %}

#### 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](https://demos.webspellchecker.com/wproofreader-html-controls.html).

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

{% hint style="success" %}
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.
{% endhint %}

👉 See the demo with [CKEditor 4](https://demos.webspellchecker.com/wproofreader-ckeditor4.html), [Froala](https://demos.webspellchecker.com/wproofreader-froala.html), or [Quill](https://demos.webspellchecker.com/wproofreader-quill.html).

***

### 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

{% code overflow="wrap" fullWidth="true" %}

```html
<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>
```

{% endcode %}

{% code overflow="wrap" fullWidth="true" %}

```html
<!-- 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> -->
```

{% endcode %}

{% hint style="info" %}
In this example, the `textarea` uses Spanish (`es_ES`) because element attributes override the global `lang` setting.
{% endhint %}

***

### Related resources

* [Configuration reference](https://webspellchecker.com/docs/api/wscbundle/Options.html) — full list of available options.
* [JavaScript SDK on npm](https://www.npmjs.com/package/@webspellchecker/wproofreader-sdk-js) and [GitHub repository](https://github.com/WebSpellChecker/wproofreader-sdk-js/tree/master) — includes framework examples with CKEditor 4, TinyMCE, Froala, and Quill in Vue, React, and Angular.
* [Demos](https://demos.webspellchecker.com/)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.wproofreader.com/integrations/initialization/initialization-options.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.