---
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/6/non-editable-content-options/index.md"
version: "6"
last_updated: "2024-02-13T00:35:02Z"
tokens: 1006
---
Important This page documents TinyMCE 6. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../latest/non-editable-content-options/).
# 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`

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

## `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,
});
```