> For the complete documentation index, see [llms.txt](https://docs.wproofreader.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.wproofreader.com/v6.12.0/integrations/html-editable-elements.md). # HTML editable elements This guide covers how to enable WProofreader in standard HTML editable elements: `

`, `<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](https://demos.webspellchecker.com/wproofreader-html-controls.html) | [See mixed controls demo](https://demos.webspellchecker.com/wproofreader-mixed-controls.html)

### Prerequisites

You'll need an active WProofreader subscription or trial. [Sign up for a free trial or choose a plan](https://wproofreader.com/sdk#pricing)

For the Cloud version, you'll need a Service ID. You can find it on the [Credentials](https://app.wproofreader.com/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](/v6.12.0/integrations/initialization/initialization-options.md) guide.

### Using init()

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

#### Textarea

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

``` #### Contenteditable div ```html

Your text here.

``` #### Iframe The iframe must contain an editable document. Point the `container` to the iframe element itself. ```html ``` The `editable-page.html` file should have `contenteditable` on the ``: ```html Your text here. ``` #### Input `` elements aren't covered by autoSearch by default. Use `init()` to enable proofreading on a specific input: ```html ``` To enable autoSearch for all `` 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 ```html

Your text here.

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

First editor.

``` 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](/v6.12.0/integrations/initialization/initialization-options/initialize-using-npm-sdk.md) guide. ### What's next * [Configuration options](https://docs.wproofreader.com/integrations/initialization/configuration-options) to customize behavior, UI, languages, and dictionaries. * [Configuration reference](https://webspellchecker.com/docs/api/wscbundle/Options.html) for the full list of parameters. * [Features](/v6.12.0/features/spell-and-grammar-check.md) overview to explore all WProofreader capabilities. * [Demos](https://demos.webspellchecker.com/) to see working examples.