Important changes to Tiny Cloud pricing > Find out more

Content appearance options

Configure the appearance of content inside TinyMCe's editable area.

Contribute to this page

body_class

Use the body_class option to add a class to the body of each editor instance. This class can be used to override the styles added by the content_css option. The body_class will be removed if the editor is removed and will not be included in any content retrieved from the editor.

Type: String

Example: Using body_class

This will add the same class to all editors that gets created by the init call.

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

This will set specific classes on the bodies of specific editors.

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  body_class: 'elm1=my_class, elm2=my_class'
});

body_id

This option enables you to specify an id for the body of each editor instance. This id can then be used to do TinyMCE specific overrides in your content_css.

Type: String

Example: Using body_id

This will add the same id to all editors that gets created by the init call.

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

This will set specific ids on the bodies of specific editors.

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  body_id: 'elm1=my_id, elm2=my_id2'
});

content_css

It is usually desirable that TinyMCE’s editable area has the same styling as the surrounding content. Consistent styling is achieved with the content_css option, which enables you to extend external CSS into the editable area.

TinyMCE comes with four content CSS files:

  • default
  • dark
  • document
  • writer

These content CSS files can be enabled in the editor using the content_css configuration option.

For example:

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

These content CSS files can also be used as a template for creating a custom content CSS file for the editor. For the CSS files, see: tinymce-dist GitHub Repository - Content CSS files.

Tiny also provides content CSS files with the premium skins, for a list of premium content CSS files, see: Tiny Skins and Icon Packs.

Tiny recommends using the same CSS for both the editor and the page where the editor content will be rendered.

Note: If you specify a relative path, it is resolved in relation to the URL of the (HTML) file that includes TinyMCE, not relative to TinyMCE itself.

Type: String, Array

Absolute path example

// File: http://domain.mine/mysite/index.html

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  content_css : '/myLayout.css'  // resolved to http://domain.mine/myLayout.css
});

Relative path example

// File: http://domain.mine/mysite/index.html

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  content_css : 'mycontent.css'  // resolved to http://domain.mine/mysite/mycontent.css
});

Using multiple stylesheets example

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  content_css : 'mycontent.css,mycontent2.css'  // includes both CSS files in header
});

Using multiple stylesheets as array example

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  content_css: ['mycontent.css', 'mycontent2.css']  // includes both CSS files in header, ability to have CSS with `,` in URL
});

Browser caching

Browser caching might cause TinyMCE to not read the contents of a changed CSS file. You’ll see “old” colors & styles.

One solution is to manually clear the browser cache when the file for content_css or editor_css has changed. Another solution is to use an old hack which adds a bogus parameter to the URL containing a present time stamp like “myFile.css?bogus=10023561235”. Possible solutions could look like this:

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  content_css: 'path/myfile.css?' + new Date().getTime()
});
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  content_css: 'path/myscript.php?myParam=myValue&bogus=' + new Date().getTime()
});

content_css_cors

When content_css_cors is set to true, the editor will add a crossorigin="anonymous" attribute to the link tags that the StyleSheetLoader uses when loading the content_css. This allows you to host the content_css on a different server than the editor itself.

Type: Boolean

Default Value: false

Example: Using content_css_cors

// File: http://domain.mine/mysite/index.html

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  content_css : 'http://www.somewhere.example/mycontent.css',
  content_css_cors: true
});

content_style

This option allows you to set custom CSS styles as a string that is injected into the editor’s iframe.

These styles are useful for previewing content as it appears outside the editor. Since these styles are not saved with the content, it is important that they match the styles in the location that the content appears.

Type: String

Example: Applying one CSS style using content_style

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  content_style: 'div { margin: 10px; border: 5px solid red; padding: 3px; }'
});

To add two or more styles with this option, provide the styles as a single string.

Example: Applying two or more CSS styles using content_style

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  content_style: 'div { margin: 10px; border: 5px solid red; padding: 3px; } ' +
    '.blue { color: blue; } .red { color: red; }'
});

inline_boundaries

The inline_boundaries option allows you to disable the inline boundaries. For information on how to change the appearance of the inline boundaries see the Boilerplate Content CSS page.

Type: Boolean

Default Value: true

Possible Values: true, false

Example: Using inline_boundaries

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

inline_boundaries_selector

The inline_boundaries_selector option allows you specify what elements the inline boundaries should apply to. This defaults to a[href],code,.mce-annotation but can be extended to include other inline elements such as b, strong, i, and em.

If you add new elements, you need to add CSS selectors for them in the content CSS. See the Boilerplate Content CSS page for details.

Type: String

Default Value: a[href],code,.mce-annotation

Example: Using inline_boundaries_selector

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  inline_boundaries_selector: 'a[href],code,b,i,strong,em'
});

Text color options

These options affect the color selector shown when using the forecolor (text color) and backcolor (text background) toolbar buttons or menu items. The dimensions and mapping of the grid of text colors can be set here.

color_cols

This option allows for specifying the number of columns for text color grids. The number of rows is calculated based on the number of text colors supplied divided by the specified number of columns.

By default, the number of rows and columns is dependent of the number of colors specified using color_map. The dimensions of the grid will be calculated by TinyMCE to keep the grid a square or a rectangle with a minimum of 5 columns.

Note: The textcolor_cols and textcolor_rows properties have been removed in TinyMCE 5.

Type: Integer

Example: Using color_cols

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  toolbar: 'forecolor backcolor',
  color_cols: 5
});

color_map

This option allows specifying a map of the text colors that will appear in the grid.

Type: Array

Example: Using color_map

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  toolbar: 'forecolor backcolor',
  color_map: [
    '000000', 'Black',
    '808080', 'Gray',
    'FFFFFF', 'White',
    'FF0000', 'Red',
    'FFFF00', 'Yellow',
    '008000', 'Green',
    '0000FF', 'Blue'
  ]
});

The default color_map

color_map: [
  '#BFEDD2', 'Light Green',
  '#FBEEB8', 'Light Yellow',
  '#F8CAC6', 'Light Red',
  '#ECCAFA', 'Light Purple',
  '#C2E0F4', 'Light Blue',

  '#2DC26B', 'Green',
  '#F1C40F', 'Yellow',
  '#E03E2D', 'Red',
  '#B96AD9', 'Purple',
  '#3598DB', 'Blue',

  '#169179', 'Dark Turquoise',
  '#E67E23', 'Orange',
  '#BA372A', 'Dark Red',
  '#843FA1', 'Dark Purple',
  '#236FA1', 'Dark Blue',

  '#ECF0F1', 'Light Gray',
  '#CED4D9', 'Medium Gray',
  '#95A5A6', 'Gray',
  '#7E8C8D', 'Dark Gray',
  '#34495E', 'Navy Blue',

  '#000000', 'Black',
  '#ffffff', 'White'
]

custom_colors

This option allows disabling the custom color picker in all color swatches of the editor.

Type: Boolean

Default Value: true

Example: Using custom_colors

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

visual

This true/false option gives you the ability to enable or disable the visual aid.

This setting also allows visual aid to override the Menu settings. For instance, you can enable or disable visual aid even if the Menu is set to False.

If the border of a table is set to 0, then TinyMCE adds a dotted line around the table by default.

Type: Boolean

Default Value: true

Possible Values: true, false

Example: Using visual

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

visual_anchor_class

This option enables you to configure a custom class to be added to anchors with names since these are invisible by default.

Type: String

Example: Using visual_anchor_class

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

visual_table_class

This option enables you to configure a custom class to be added to tables that have a border set to 0. This class is used to add dotted borders to tables that would otherwise be invisible for the user.

Type: String

Example: Using visual_table_class

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

Can't find what you're looking for? Let us know.

Except as otherwise noted, the content of this page is licensed under the Creative Commons BY-NC-SA 3.0 License, and code samples are licensed under the Apache 2.0 License.