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

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

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

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

tinymce.init({
  selector: 'textarea',
  allow_unsafe_link_target: true
});

convert_fonts_to_spans

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

Default Value: div elements

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.

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.

element_format

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

Type: String

Default Value: xhtml

Possible Values: xhtml, html

Example

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

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 <, >, ", and &.

This option is disabled by default.

Type: String

Example

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

Example

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 too the HTML and XML specs.

Encoding types

Type: String

Example

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

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.

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

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

forced_root_block

This option enables you to make sure that any non block elements or text nodes are wrapped in block elements. For example <strong>something</strong> will result in output like: <p><strong>something</strong></p>. This option is enabled by default as of version 3.0.

If you set this option to false it will never produce p tags on enter, or, automatically it will instead produce br elements and Shift+Enter will produce a p.

Note: Not using p elements as root block can severely cripple the functionality of the editor.

Type: String

Example

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

forced_root_block_attrs

This option enables you specify attributes for the forced_root_block.

Type: Object

Example

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

invalid_elements

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

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

invalid_styles

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

• String format - This is a simple list of global styles to disallow.
• Object format - This is a more complex format where you can specify invalid styles for individual elements.

Simple global classes

Type: String, Object

Example

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

Element specific classes

Type: String, Object

Example

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

keep_styles

The keep_styles option will keep the editor’s current text style when a user presses enter/return.

Type: Boolean

Default Value: true

Possible Values: true, false

Example

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

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

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

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

schema

The schema 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 where 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

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

valid_children

The valid_children enables you to control what child elements can exists 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:

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

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

The valid_elements 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:

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

Special variables

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

Type: String

Example

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 keep the ‘href’, ‘target’ and ‘align’ attributes of the 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

This option enables you specify the available styles for each element. This means you can force ordering and only specific styles will be valid within style attribute values. Specify the element name, then it’s styles or * for all elements.

Type: Object

Example

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