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

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

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

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

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>

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

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

convert_fonts_to_spans

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

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

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
});

doctype

Set the doctype for the editing area.

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.

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

// 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

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:

'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

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

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. 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 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 for default rules.

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

Type: String

Example: using extended_valid_elements

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 and invalid_elements for more configuration options.

Using extended_valid_elements to allow script elements

Allowing script elements (<script>) in TinyMCE exposes users to cross-site scripting (XSS) attacks.

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 option. This option is used to add additional valid elements and attributes.

  • TinyMCE

  • HTML

  • JS

  • Edit on CodePen

<textarea id="valid-elements">
  <p><img style="display: block; margin-left: auto; margin-right: auto;" title="Tiny Logo" src="https://www.tiny.cloud/docs/images/logos/android-chrome-256x256.png" alt="TinyMCE Logo" width="128" height="128"></p>
  <h2 style="text-align: center;">Welcome to the TinyMCE editor demo!</h2>

  <h2>Got questions or need help?</h2>
  <ul>
    <li>Our <a href="https://www.tiny.cloud/docs/tinymce/6/">documentation</a> is a great resource for learning how to configure TinyMCE.</li>
    <li>Have a specific question? Try the <a href="https://stackoverflow.com/questions/tagged/tinymce" target="_blank" rel="noopener"><code>tinymce</code> tag at Stack Overflow</a>.</li>
    <li>We also offer enterprise grade support as part of <a href="https://www.tiny.cloud/pricing">TinyMCE premium plans</a>.</li>
  </ul>

  <h2>A simple table to play with</h2>
  <table style="border-collapse: collapse; width: 100%;" border="1">
    <thead>
      <tr>
        <th>Product</th>
        <th>Cost</th>
        <th>Really?</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>TinyMCE</td>
        <td>Free</td>
        <td>YES!</td>
      </tr>
      <tr>
        <td>Plupload</td>
        <td>Free</td>
        <td>YES!</td>
      </tr>
    </tbody>
  </table>

  <h2>Found a bug?</h2>
  <p>If you think you have found a bug please create an issue on the <a href="https://github.com/tinymce/tinymce/issues">GitHub repo</a> to report it to the developers.</p>

  <h2>Finally ...</h2>
  <p>Don't forget to check out our other product <a href="http://www.plupload.com" target="_blank">Plupload</a>, your ultimate upload solution featuring HTML5 upload support.</p>
  <p>Thanks for supporting TinyMCE! We hope it helps you and your users create great content.<br>All the best from the TinyMCE team.</p>
</textarea>
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:

<ol>
  <li>a</li>
    <ol>
      <li>b</li>
      <li>c</li>
   </ol>
    <li>e</li>
</ol>

Gets converted into this valid list:

<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

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 setting to change what happens when enter is pressed.

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

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.

Type: Object

Example: using forced_root_block_attrs

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

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

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  invalid_elements: 'strong,em'
});
This option doesn’t accept attributes in the list, only elements.

Also see valid_elements and 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

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

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

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

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

An equivalent filtering option, padd_empty_with_br was removed from TinyMCE 6.0.0.

This new — and correctly spelled — option behaves in essentially identical fashion to the older option.

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

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 and 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

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

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

Type: String

Default value: 'html5'

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

Example: using schema

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.

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

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

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

Example element specific classes

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 and HTML4 specification or the HTML5 or HTML4 specification depending on the configured schema.

If you just want to add or change some behavior for a few items, use the 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, 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 option.

Type: String

Example: using valid_elements

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:

//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

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