---
title: "Content filtering options"
description: "These settings change the way the editor handles the input and output of content. This will help you to create clean, maintainable and readable content."
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/content-filtering/"
md_url: "https://www.tiny.cloud/docs/tinymce/7/content-filtering/index.md"
version: "7"
last_updated: "2026-02-11T04:18:33Z"
tokens: 9002
---
Important This page documents TinyMCE 7. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../latest/content-filtering/).
# Content filtering options

## `allow_conditional_comments`

This option allows you to specify whether the editor should parse and keep conditional comments.

**Type:** `Boolean`

**Default value:** `false`

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

### Example: using `allow_conditional_comments`

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

## `allow_html_in_named_anchor`

This option allows you to specify whether the editor should parse and keep `html` within named `anchor` tags.

**Type:** `Boolean`

**Default value:** `false`

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

### Example: using `allow_html_in_named_anchor`

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

## `allow_html_in_comments`

This option controls whether HTML-like syntax in comment nodes is allowed during content sanitization. When set to `false`, HTML-like content in comment nodes will be sanitized more strictly.

**Type:** `Boolean`

**Default value:** `true`

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

> **Note:** This option will default to `false` in TinyMCE 8.x.

### Example: using `allow_html_in_comments`

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

## `allow_mathml_annotation_encodings`

This option allows a specific list of valid MathML annotation encodings to be used in the editor.

**Type:** `Array` of `Strings`

**Default value:** `[]` (empty array)

### Example: using `allow_mathml_annotation_encodings`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  allow_mathml_annotation_encodings: [ 'wiris', 'application/x-tex' ]
});
```

## `allow_unsafe_link_target`

By default all links with a `target` of *_blank* will get a `rel` attribute of `noopener`. This will disable access to the `window.opener` object from a child tab/window that will open on click. If this is not something you care about, you can disable this option, by setting it to *false*. Although **we do not recommend** you to do so unless you have other ways of securing links to external pages using target set to *_blank*.

**Type:** `Boolean`

**Default value:** `false`

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

### Example: using `allow_unsafe_link_target`

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

## `br_in_pre`

This option allows you to disable TinyMCE’s default behavior when pressing the enter key within a `pre` tag. By default, pressing enter within a `pre` tag produces a `br` tag at the insertion point. For example:

`<pre>This is inside<br>a pre tag.</pre>`

However, when `br_in_pre` is set to `false`, rather than inserting a `br` tag TinyMCE will split the `pre` tag. For example:

`<pre>This is inside</pre><pre>a pre tag.</pre>`

> **Note:** When this option is set to `false`, `shift+enter` will insert a `br` tag.
**Type:** `Boolean`

**Default value:** `true`

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

### Example: using `br_in_pre`

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

## `convert_fonts_to_spans`

> **Important:** This option has been deprecated in TinyMCE 5.10 and may be removed in a future major TinyMCE release.
If you set this option to `true`, TinyMCE will convert all `font` elements to `span` elements and generate `span` elements instead of `font` elements. This option should be used in order to get more W3C compatible code, since font elements are deprecated.

**Type:** `Boolean`

**Default value:** `true`

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

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

## `custom_elements`

This option enables you to specify non-HTML elements for the editor.

This way you can handle non-HTML elements inside an HTML editor. You can prefix the element names with a `~` if you want the element to behave as a `span` element and not a `div` element.

**Type:** `String`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  extended_valid_elements: 'mycustomblock[id],mycustominline',
  custom_elements: 'mycustomblock,~mycustominline' // Notice the ~ prefix to force a span element for the element
});
```

- **Custom Element Structure:** The custom_elements option and the `addCustomElements` API supports more complex structures. This structure is defined by a record where the key represents the name of the element, and the value corresponds to a detailed specification.
- **Attributes and Inheritance:** Elements inherit attributes and children from other specified elements using the `extends: "div"` property in the `custom_elements` spec.
- **Attribute and Children Specifications:** The `custom_elements` spec includes properties such as `attributes` which lists attribute names, or `children` which lists valid child element names. The `children` property includes presets like `@global`, `@blocks`, `@phrasing`, and `@flow`.

HTML Element Sets: The exact element sets for each preset, depending on the schema set (html4, html5, or html5-strict), can be found in the below tables.

### HTML Element Sets: `html4`

| Type | Expected |
| --- | --- |
| @blocks | address, blockquote, div, dl, fieldset, form, h1, h2, h3, h4, h5, h6, hr, menu, ol, p, pre, table, ul, center, dir, isindex, noframes |
| @phrasing | a, abbr, b, bdo, br, button, cite, code, del, dfn, em, embed, i, iframe, img, input, ins, kbd, label, map, noscript, object, q, s, samp, script, select, small, span, strong, sub, sup, textarea, u, var, #text, #comment, acronym, applet, basefont, big, font, strike, tt |
| @flow | Same as @blocks + @phrasing |

### HTML Element Sets: `html5`

| Type | Expected |
| --- | --- |
| @blocks | address, blockquote, div, dl, fieldset, form, h1, h2, h3, h4, h5, h6, hr, menu, ol, p, pre, table, ul, article, aside, details, dialog, figure, main, header, footer, hgroup, section, nav, a, ins, del, canvas, map, center, dir, isindex, noframes |
| @phrasing | a, abbr, b, bdo, br, button, cite, code, del, dfn, em, embed, i, iframe, img, input, ins, kbd, label, map, noscript, object, q, s, samp, script, select, small, span, strong, sub, sup, textarea, u, var, #text, #comment, audio, canvas, command, data, datalist, mark, meter, output, picture, progress, time, wbr, video, ruby, bdi, keygen, svg, acronym, applet, basefont, big, font, strike, tt |
| @flow | Same as @blocks + @phrasing |

### HTML Element Sets: `html5-strict`

| Type | Expected |
| --- | --- |
| @blocks | address, blockquote, div, dl, fieldset, form, h1, h2, h3, h4, h5, h6, hr, menu, ol, p, pre, table, ul, article, aside, details, dialog, figure, main, header, footer, hgroup, section, nav, a, ins, del, canvas, map |
| @phrasing | a, abbr, b, bdo, br, button, cite, code, del, dfn, em, embed, i, iframe, img, input, ins, kbd, label, map, noscript, object, q, s, samp, script, select, small, span, strong, sub, sup, textarea, u, var, #text, #comment, audio, canvas, command, data, datalist, mark, meter, output, picture, progress, time, wbr, video, ruby, bdi, keygen, svg |
| @flow | Same as @blocks + @phrasing |

### Example using `custom_elements` with presets such as `@blocks`, `@phrasing`, and `@flow`.

```js
tinymce.init({
  selector: "textarea",
  // Add custom elements using the custom_elements option
  custom_elements: {
    // Custom element 'foo-bar' extends 'div' with attributes 'attr1' and 'attr2'
    "foo-bar": {
      extends: "div",
      attributes: ["attr1", "attr2"],
    },
    // Custom element 'foo-baz' extends 'span' allowing children '@phrasing' and 'foo-child'
    "foo-baz": {
      extends: "span",
      children: ["@phrasing", "foo-child"],
    },
    // Custom element 'foo-child' has no specific configuration
    "foo-child": {},
  },
  // You can also use the addCustomElements API to add custom elements
  setup: (editor) => {
    editor.on("preinit", () => {
      editor.schema.addCustomElements({
        // Custom element 'hey-bar' extends 'div' with attributes 'attr1' and 'attr2' as well as all global attributes
        "hey-bar": {
          extends: "div",
          attributes: ["@global", "attr1", "attr2"],
        },
        // Custom element 'hey-baz' extends 'span' allowing children 'hey-child' as well as all phrasing content
        "hey-baz": {
          extends: "span",
          children: ["@phrasing", "hey-child"],
        },
        // Custom element 'hey-child' has no specific configuration
        "hey-child": {},
      });
    });
  },
});
```

## `convert_unsafe_embeds` option

This option controls whether an `<object>` and `<embed>` elements will be converted to more restrictive alternatives, namely `<img>` for image MIME types, `<video>` for video MIME types, `<audio>` for audio MIME types, or `<iframe>` for other or unspecified MIME types.

When converted to `<img>`, `<video>`, or `<audio>`, this prevents the embedded resource from performing potentially malicious actions including scripting, file downloads, browser popups, passing the same-origin policy, among others. Enable the `sandbox_iframes` option in addition to ensure <iframe> conversions are also neutralised.

**Type:** `Boolean`

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

**Default value:** `true`

### Example: using `convert_unsafe_embeds` option

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

## `doctype`

Set the `doctype` for the editing area.

> **Warning:** Changing the `doctype` can have different effects on different browsers and may introduce quirks. Use this feature only if you know what you are doing. For more information on doctypes, go to [this link](https://www.w3.org/wiki/Doctypes_and_markup_styles).

## `element_format`

This option controls whether elements are output in the HTML or XHTML mode. `html` is the default state for this option. This means that for example `<br />` will be `<br>` by default.

**Type:** `String`

**Default value:** `'html'`

**Possible values:** `'xhtml'`, `'html'`

### Example: using `element_format`

```js
// Output elements in XHTML style
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  element_format: 'xhtml'
});
```

## `encoding`

This option allows you to get XML escaped content out of TinyMCE. By setting this option to `xml`, posted content will be converted to an XML string, escaping characters such as `<`, `>`, `"`, `'` and `&` to `&lt;`, `&gt;`, `&quot;`, `&apos;` and `&amp;`.

This option is disabled by default.

**Type:** `String`

### Example: using `encoding`

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

## `entities`

This option contains a comma-separated list of entity names that are used instead of characters. Odd items are the character code, and even items are the names of the character code.

The base entities `<`, `>`, `&`, `'`, and `"` will always be entity encoded into their named equivalents. Though, `'` and `"` will only be encoded within attribute values and `<` and `>` will only be encoded within text nodes. This is correct according to the HTML and XML specifications.

*This setting will only encode characters higher than \u007E (126 in unicode).*

**Type:** `String`

**Default value:**

```js
'160,nbsp,161,iexcl,162,cent,163,pound,164,curren,165,yen,166,brvbar,' +
'167,sect,168,uml,169,copy,170,ordf,171,laquo,172,not,173,shy,174,' +
'reg,175,macr,176,deg,177,plusmn,178,sup2,179,sup3,180,acute,181,' +
'micro,182,para,183,middot,184,cedil,185,sup1,186,ordm,187,raquo,188,' +
'frac14,189,frac12,190,frac34,191,iquest,192,Agrave,193,Aacute,194,' +
'Acirc,195,Atilde,196,Auml,197,Aring,198,AElig,199,Ccedil,200,Egrave,' +
'201,Eacute,202,Ecirc,203,Euml,204,Igrave,205,Iacute,206,Icirc,207,' +
'Iuml,208,ETH,209,Ntilde,210,Ograve,211,Oacute,212,Ocirc,213,Otilde,' +
'214,Ouml,215,times,216,Oslash,217,Ugrave,218,Uacute,219,Ucirc,220,' +
'Uuml,221,Yacute,222,THORN,223,szlig,224,agrave,225,aacute,226,acirc,' +
'227,atilde,228,auml,229,aring,230,aelig,231,ccedil,232,egrave,233,' +
'eacute,234,ecirc,235,euml,236,igrave,237,iacute,238,icirc,239,iuml,' +
'240,eth,241,ntilde,242,ograve,243,oacute,244,ocirc,245,otilde,246,' +
'ouml,247,divide,248,oslash,249,ugrave,250,uacute,251,ucirc,252,uuml,' +
'253,yacute,254,thorn,255,yuml,402,fnof,913,Alpha,914,Beta,915,Gamma,' +
'916,Delta,917,Epsilon,918,Zeta,919,Eta,920,Theta,921,Iota,922,Kappa,' +
'923,Lambda,924,Mu,925,Nu,926,Xi,927,Omicron,928,Pi,929,Rho,931,' +
'Sigma,932,Tau,933,Upsilon,934,Phi,935,Chi,936,Psi,937,Omega,945,' +
'alpha,946,beta,947,gamma,948,delta,949,epsilon,950,zeta,951,eta,952,' +
'theta,953,iota,954,kappa,955,lambda,956,mu,957,nu,958,xi,959,' +
'omicron,960,pi,961,rho,962,sigmaf,963,sigma,964,tau,965,upsilon,966,' +
'phi,967,chi,968,psi,969,omega,977,thetasym,978,upsih,982,piv,8226,' +
'bull,8230,hellip,8242,prime,8243,Prime,8254,oline,8260,frasl,8472,' +
'weierp,8465,image,8476,real,8482,trade,8501,alefsym,8592,larr,8593,' +
'uarr,8594,rarr,8595,darr,8596,harr,8629,crarr,8656,lArr,8657,uArr,' +
'8658,rArr,8659,dArr,8660,hArr,8704,forall,8706,part,8707,exist,8709,' +
'empty,8711,nabla,8712,isin,8713,notin,8715,ni,8719,prod,8721,sum,' +
'8722,minus,8727,lowast,8730,radic,8733,prop,8734,infin,8736,ang,' +
'8743,and,8744,or,8745,cap,8746,cup,8747,int,8756,there4,8764,sim,' +
'8773,cong,8776,asymp,8800,ne,8801,equiv,8804,le,8805,ge,8834,sub,' +
'8835,sup,8836,nsub,8838,sube,8839,supe,8853,oplus,8855,otimes,8869,' +
'perp,8901,sdot,8968,lceil,8969,rceil,8970,lfloor,8971,rfloor,9001,' +
'lang,9002,rang,9674,loz,9824,spades,9827,clubs,9829,hearts,9830,' +
'diams,338,OElig,339,oelig,352,Scaron,353,scaron,376,Yuml,710,circ,' +
'732,tilde,8194,ensp,8195,emsp,8201,thinsp,8204,zwnj,8205,zwj,8206,' +
'lrm,8207,rlm,8211,ndash,8212,mdash,8216,lsquo,8217,rsquo,8218,sbquo,' +
'8220,ldquo,8221,rdquo,8222,bdquo,8224,dagger,8225,Dagger,8240,' +
'permil,8249,lsaquo,8250,rsaquo,8364,euro'
```

### Example: using `entities`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  entities: '160,nbsp,162,cent,8364,euro,163,pound'
});
```

## `entity_encoding`

This option controls how entities/characters get processed by TinyMCE. The value can be set as shown in *Encoding types* below. You can also mix named and numeric by setting this to "named+numeric" this way it will produce entity names of the ones found in the configured entities and numeric entities for other entities.

The base entities `<`, `>`, `&`, `'`, and `"` will always be entity encoded into their named equivalents. Though, `'` and `"` will only be encoded within attribute values and `<` and `>` will only be encoded within text nodes. This is correct according to the HTML and XML specs.

### Encoding types

| Name | Summary |
| --- | --- |
| named | Characters will be converted into named entities based on the entities option. For example, a non-breaking space could be encoded as `&nbsp;`. This value is default. |
| numeric | Characters will be converted into numeric entities. For example, a non-breaking space would be encoded as `&#160;`. |
| raw | All characters will be stored in non-entity form except these XML default entities: `&`, `<`, `>`, `'`, and `"`. |

**Type:** `String`

#### Example: using `entity_encoding`

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

## `extended_valid_elements`

This option is very similar to [`valid_elements`](#valid_elements). The only difference between this option and `valid_elements` is that this one gets added to the existing rule set. This can be very useful if the existing rule set is fine but you want to add some specific elements that also should be valid. The default rule set is controlled by the [`schema`](#schema) option.

When adding a new attribute by specifying an existing element rule (e.g. `img`), the entire rule for that element is over-ridden so be sure to include all valid attributes not just the one you wish to add. See [`valid_elements`](#valid_elements) for default rules.

The below example replaces the current `img` rule (including the global element rules).

**Type:** `String`

### Example: using `extended_valid_elements`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  extended_valid_elements: 'img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name]'
});
```
Also see [valid_elements](#valid_elements) and [invalid_elements](#invalid_elements) for more configuration options.

### Using extended_valid_elements to allow script elements

> **Warning:** Allowing script elements (`<script>`) in TinyMCE exposes users to [cross-site scripting (XSS) attacks](https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting).
To allow script elements in the editor, include the following in the TinyMCE configuration:

```
extended_valid_elements: 'script[src|async|defer|type|charset]'
```

### Interactive example

This example shows you how to use the [extended_valid_elements](#extended_valid_elements) option. This option is used to add additional valid elements and attributes.

**Example**

```js
tinymce.init({
  selector: 'textarea#valid-elements',
  plugins: 'code',
  height: 500,
  extended_valid_elements: 'img[class=myclass|!src|border~0|alt|title|width|height|style]',
  invalid_elements: 'strong,b,em,i',
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
});
```

## `fix_list_elements`

This option enables you to specify that list elements (`ul`, `ol`) should be converted to valid XHTML. This option is disabled by default since it causes some glitches with a few browsers.

This invalid list:

```html
<ol>
  <li>a</li>
    <ol>
      <li>b</li>
      <li>c</li>
   </ol>
    <li>e</li>
</ol>
```
Gets converted into this valid list:

```html
<ol>
  <li>a
    <ol>
      <li>b</li>
      <li>c</li>
    </ol>
  </li>
  <li>e</li>
</ol>
```
**Type:** `Boolean`

**Default value:** `false`

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

### Example: using `fix_list_elements`

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

## `forced_root_block`

This option enables you to adjust the default block element used to wrap non block elements and text nodes. For example `<strong>something</strong>` will result in output like: `<p><strong>something</strong></p>`. This option cannot be disabled.

To avoid block elements in content, use the [newline_behavior](../content-behavior-options/#newline_behavior) setting to change what happens when enter is pressed.

> **Warning:** Not using `p` elements as the root block will impair the functionality of the editor.
**Type:** `String`

**Default value:** `'p'`

### Example: using `forced_root_block`

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

## `forced_root_block_attrs`

This option enables you specify attributes for the [forced_root_block](#forced_root_block).

**Type:** `Object`

### Example: using `forced_root_block_attrs`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  forced_root_block_attrs: {
    'class': 'myclass',
    'data-something': 'my data'
  }
});
```

## `indent`

This option, which is on by default, adds a newline character — U+000A, `\n` — between closing and opening block elements when HTML is output using `getContent()` and when HTML is rendered in the TinyMCE [Preview](../preview/) dialog.

Set `indent` to `false` to get HTML output from TinyMCE without having any newline characters added.

**Type:** `Boolean`

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

**Default value:** `true`

### Example: setting `indent` to false

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

## `invalid_elements`

This option instructs the editor to remove specific elements when TinyMCE executes a cleanup. This option should contain a comma-separated list of element names to exclude from the content.

**Type:** `String`

### Example: using `invalid_elements`

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

> **Caution:** This option doesn’t accept attributes in the list, only elements.
Also see [valid_elements](#valid_elements) and [extended_valid_elements](#extended_valid_elements) for more configuration options.

## `invalid_styles`

This option enables you to restrict the styles that are valid for specific elements. It takes two input formats:

- **String format** - This is a list of global styles to disallow.
- **Object format** - This is a more complex format in which you can specify invalid styles for individual elements.

### Simple global classes

**Type:** `String`, `Object`

#### Example: using `invalid_styles` string

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  invalid_styles: 'color font-size'
});
```

### Element specific classes

**Type:** `String`, `Object`

#### Example: using `invalid_styles` object

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  invalid_styles: {
    '*': 'color font-size', // Global invalid styles
    'a': 'background' // Link specific invalid styles
  }
});
```

## `pad_empty_with_br`

> **Note:** This feature is only available for TinyMCE 6.6.1 and later.
By default, TinyMCE places non-breaking space entities — `&nbsp;` — as placeholders inside empty block elements.

For example, the empty paragraph `<p></p>` will, by default, be serialized to `<p>&nbsp;</p>`.

The `pad_empty_with_br` option enables TinyMCE to change this default placeholder to a break tag: `<br>`.

For example, when this option is set to `true`, an empty paragraph, `<p></p>`, is serialized to `<p><br></p>`.

**Type:** `Boolean`

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

**Default value:** `false`

### Example: using `pad_empty_with_br`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your html
  pad_empty_with_br: true,
});
```

## `protect`

This configuration option enables you to control what contents should be protected from editing while it gets passed into the editor. This could, for example, be control codes in the HTML. It’s recommended not to use inline control contents since it breaks the WYSIWYG editing concept, but sometimes they can’t be avoided.

The option takes an array of regular expression that it will match the contents against and these will be invisible while editing.

**Type:** `Array`

### Example: using `protect`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  protect: [
    /\<\/?(if|endif)\>/g,  // Protect <if> & </endif>
    /\<xsl\:[^>]+\>/g,  // Protect <xsl:...>
    /<\?php.*?\?>/g  // Protect php code
  ]
});
```

## `remove_trailing_brs`

This option allows you to disable TinyMCE’s default behavior of removing `<br>` tags at the end of block elements.

[Gecko](https://en.wikipedia.org/wiki/Gecko_(software)) and [WebKit](https://en.wikipedia.org/wiki/WebKit) browsers inject these elements to make it possible to place the caret in empty blocks. This logic attempts to remove these elements while also keeping tags that were intentionally placed by the user.

**Type:** `Boolean`

**Default value:** `true`

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

### Example: using `remove_trailing_brs`

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

## `sandbox_iframes`

This option allows control of whether `<iframe>` elements are [sandboxed](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#sandbox) when inserted into the editor. When enabled, all `<iframe>` elements will be given the `sandbox=""` attribute, applying all restrictions.

**Type:** `Boolean`

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

**Default value:** `true`

### Example: using `sandbox_iframes` option

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

## `sandbox_iframes_exclusions`

This option allows a list of domains to be specified that should be excluded from having the `sandbox=""` attribute applied when the `sandbox_iframes` option is enabled. This option takes an array of strings, each denoting at least the top and second level of a domain to be excluded. By default, this option is set to an array of domains that are provided in embed code by popular websites. To enable [sandboxing](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#sandbox) on all iframes, set this option to an empty array `[]`.

> **Note:** When the `sandbox_iframes` option is set to `false`, all domains will be excluded from sandboxing.
**Type:** `Array`

**Default value:**

```js
[
  'youtube.com',
  'youtu.be',
  'vimeo.com',
  'player.vimeo.com',
  'dailymotion.com',
  'embed.music.apple.com',
  'open.spotify.com',
  'giphy.com',
  'dai.ly',
  'codepen.io'
]
```

### Example: using `sandbox_iframes_exclusions` option

```js
tinymce.init({
  selector: "textarea",
  sandbox_iframes: true,
  sandbox_iframes_exclusions: [
    'youtube.com',
    'youtu.be',
    'vimeo.com',
    'player.vimeo.com',
    'dailymotion.com',
    'embed.music.apple.com',
    'open.spotify.com',
    'giphy.com',
    'dai.ly',
    'codepen.io'
  ],
});
```

## `schema`

This option enables you to switch between the HTML4 and HTML5 schema. This controls the valid elements and attributes that can be placed in the HTML. This value can either be the default `html5`, `html4` or `html5-strict`.

The html5 schema is the full HTML5 specification including the older HTML4 elements for compatibility. The html5-strict will only allow the elements that are in the current HTML5 specification excluding things that were removed. The html4 schema includes the full html4 transitional specification.

Also note that all event attributes are excluded by default since it’s a bad practice to use inline script handles like "onclick". You can manually add extra elements and attributes using the [extended_valid_elements](#extended_valid_elements) option.

**Type:** `String`

**Default value:** `'html5'`

**Possible values:** `'html5'`, `'html4'`, `'html5-strict'`

### Example: using `schema`

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

## `valid_children`

This option enables you to control what child elements can exist within specified parent elements.

TinyMCE will remove/split any non HTML5 or HTML transitional contents by default. So for example a `p` can’t be a child of another `p` element. The default value for this option is controlled by the current [schema](#schema).

The syntax for this option is a comma separated list of parents with elements that should be added/removed as valid children for that element. So for example `'+body[style]'` would add style as a valid child of body.

### Control characters

| Name | Summary |
| --- | --- |
| + | Adds children to the list of valid elements for the specified parent. |
| - | Removes children from the list of valid children for the specified parent. |

This example shows you how to add `style` as a valid child of `body` and remove `div` as a valid child. It also forces only `strong`, `a`, and `text` contents to be valid children of `p`.

**Type:** `String`

### Example: using `valid_children`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  valid_children: '+body[style],-body[div],p[strong|a|#text]'
});
```
This is an option you shouldn’t have to fiddle with. The default rule set for this follows the HTML5 specification and some legacy elements from HTML4. You can switch between these defaults by configuring the [`schema`](#schema) option.

## `valid_classes`

This option enables you to restrict the classes that are valid for specific elements. This option takes two formats: one string format that is a simple list of allowed global classes, and a more complex object format where you can specify classes for individual elements.

**Type:** `String`, `Object`

### Example simple global classes

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  valid_classes: 'class1 class2 class3'
});
```

### Example element specific classes

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  valid_classes: {
    '*': 'class1 class2 class3', // Global classes
    'a': 'class4 class5' // Link specific classes
  }
});
```

## `valid_elements`

This option defines which elements will remain in the edited text when the editor saves. You can use this to limit the returned HTML to a subset.

This option contains a comma separated list of element conversion chunks. Each chunk contains information about how one element and its attributes should be treated. The default rule set for this option is a mixture of the full [HTML5](https://html.spec.whatwg.org/) and [HTML4](http://www.w3.org/TR/html40/) specification or the HTML5 or HTML4 specification depending on the configured [schema](#schema).

If you just want to add or change some behavior for a few items, use the [extended_valid_elements](#extended_valid_elements) option

### Control characters

| Name | Summary |
| --- | --- |
| @ | Rules with this name will be applied to all elements defined after this rule. So `@[attr1\|attr2]` will enable `attr1` and `attr2` for all elements, but `element1,@[attr1\|attr2],element2,element3` will enable `attr1` and `attr2` only for `element2` and `element3`. If applied in [extended_valid_elements](#extended_valid_elements), it is only effective for the elements in the extended_valid_elements list. |
| , | Separates element chunk definitions. |
| / | Separates element synonyms. The first element is the one that will be output. |
| \| | Separates attribute definitions. |
| [ | Starts a new attribute list for an element definition. |
| ] | Ends an attribute list for an element definition. |
| ! | Makes attributes required. If none of the required attributes are set, the element will be removed. For example, `'!href'`. |
| = | Makes the attribute default to the specified value. For example, `'target=_blank'` |
| ~ | Forces the attribute to the specified value. For example, `'border~0'` |
| < | Verifies the value of an attribute (only the listed values are allowed). For example, `'target<_blank?_self'` |
| ? | Separates attribute verification values. See above. |
| + | Makes the element open if no child nodes exists. For example, `'+a'`. |
| - | Enables removal of empty elements such as `<strong />`. For example, `'-strong'`. |
| # | Enables padding of empty elements. This will pad with `&nbsp;` if they are empty. For example, `'#p'`. |
| ! | Enables removal of elements with no attributes such as `<span>`. They can still have content though. |

Wildcards such as `*`, `+`, `?` may be used in element or attribute name matching.

### Variables

| Name | Summary |
| --- | --- |
| `{$uid}` | Results in a unique ID. For example, `'p[id~{$uid}]'`. |

Use `*[*]` to include all elements and all attributes. This can be very useful when used with the [invalid_elements](#invalid_elements) option.

**Type:** `String`

### Example: using `valid_elements`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  valid_elements: 'a[href|target=_blank],strong/b,div[align],br'
});
```
This example string tells TinyMCE to:

- Remove all elements that are not a `a`, `strong`, `div` or `br` element.
- Convert `b` elements to `strong` elements.
- Default `target` to `_blank` and keeps the `href`, `target` and `align` attributes of the relevant elements.

### Duplicate attribute warning

Be careful not to duplicate attributes in the definitions as this may cause TinyMCE to render duplicate attributes in the output. For example, if you have:

```js
//bad code: dir and style listed twice
'blockquote[dir|style|cite|class|dir<ltr?rtl|id|lang|onclick|ondblclick'
 +'|onkeydown|onkeypress|onkeyup|onmousedown|onmousemove|onmouseout'
 +'|onmouseover|onmouseup|style|title]'
```
then if you happen to have a `<blockquote>` element in your code with `style=` or `dir=` attributes, the editor will cause each of those attributes to be duplicated in the output, which will result in invalid XHTML.

## `valid_styles`

To use this option, specify an object containing a mapping of element names to allowed styles. To specify the allowed styles for all elements, use `*` as the element name.

By default, all styles are allowed unless `valid_styles` or `invalid_styles` is configured.

**Type:** `Object`

### Example: using `valid_styles`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  valid_styles: {
    '*': 'border,font-size',
    'div': 'width,height'
  }
});
```