---
title: "Non-editable content"
description: "Options for creating non-editable content."
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/non-editable-content-options/"
md_url: "https://www.tiny.cloud/docs/tinymce/latest/non-editable-content-options/index.md"
version: "latest"
last_updated: "2026-05-07T05:55:46Z"
tokens: 1078
---
# Non-editable content

## `editable_class`

This option allows you to specify the class name that TinyMCE will use to determine which areas of content are editable. This would be the same as `contenteditable=true`, forcing an element to be editable.

Note that classes with the `mceItem` prefix are invisible within TinyMCE.

**Type:** `String`

**Default value:** `'mceEditable'`

### Example: using `editable_class`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  editable_class: 'mceEditable'
});
```

## `editable_root`

This option sets the initial editable state of a TinyMCE instance’s root.

Setting `editable_root` to `false` sets the TinyMCE root to non-editable (in effect, read-only).

> **Note:** a TinyMCE root set as not-editable can contain child elements with the `contenteditable="true"` attribute set. And these child elements remain editable even when `editable_root: false` is set.
**Type:** `Boolean`

**Default value:** `true`

**Possible values:** `true`, `false`

### Example: using `editable_root`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  editable_root: false
});
```
**Example**

```js
tinymce.init({
  selector: 'textarea#editable-class',
  height: 500,
  content_style: `
  body { font-family:Helvetica,Arial,sans-serif; font-size:16px }
  .editable { border: 0.1rem solid green; border-radius: 0.8rem; padding: 0.2rem; }
  `,
  editable_root: false,
  editable_class: 'editable',
});
```

> **Note:** Visit [Template creation example](../ie-template-creation/) for a practical example of multi-root editing.

## `allow_noneditable`

This option controls whether the non-editable content feature is enabled. When set to `false`, the non-editable feature is disabled entirely, equivalent to disabling the `noneditable` plugin prior to TinyMCE 6.

**Type:** `Boolean`

**Default value:** `true`

### Example: using `allow_noneditable`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  allow_noneditable: false
});
```

## `noneditable_class`

This option allows you to specify the class name that TinyMCE will use to determine which areas of content are non-editable. This would be the same as `contenteditable=false`.

Note that classes with the `mceItem` prefix are invisible within TinyMCE.

**Type:** `String`

**Default value:** `'mceNonEditable'`

### Example: using `noneditable_class`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  noneditable_class: 'mceNonEditable'
});
```
**Example**

```js
tinymce.init({
  selector: 'textarea#noneditable-class',
  height: 500,
  content_style: `
  body { font-family:Helvetica,Arial,sans-serif; font-size:16px }
  .myclass { border: 0.1rem solid green; border-radius: 0.8rem; padding: 0.2rem; }
  .non-editable { border-color: red; }
  `,
  noneditable_class: 'non-editable',
});
```

## `noneditable_regexp`

This option is used to specify a regular expression or array of regular expressions that TinyMCE will use to determine which areas of content are non-editable. The regular expressions needs to be global so that all instances within the document are matched. The text content of the matches will be wrapped in spans, hiding the structure and styling while editing.

> **Note:** If elements are matched by the regular expression, the elements will be replaced with spans. Use [`noneditable_class`](#noneditable_class) for elements.
**Type:** `String`

### Example: using `noneditable_regexp`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  noneditable_regexp: /\d{3}-\d{3}-\d{3}/g // matches 123-456-789
});
```
**Example**

```js
tinymce.init({
  selector: 'textarea#noneditable-regexp',
  height: 500,
  content_style: `
  body { font-family:Helvetica,Arial,sans-serif; font-size:16px }
  .green { border: 0.1rem solid green; border-radius: 0.8rem; padding: 0.2rem; }
  .red * { border: 0.1rem solid red; border-radius: 0.8rem; padding: 0.2rem; }
  `,
  noneditable_regexp: /apikey|\d{3}-\d{3}-\d{3}/g,
});
```