# 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](/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](/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](/features/spell-and-grammar-check.md) overview to explore all WProofreader capabilities. * [Demos](https://demos.webspellchecker.com/) to see working examples. --- # 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/html-editable-elements.md?ask= ``` 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.