Content appearance options

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

Contribute to this page

body_class

This option enables you to specify a class for the body of each editor instance. This class can then be used to do TinyMCE specific overrides in your content_css. There is also a specific mceForceColors class that can be used to override the text and background colors to be black and white.

Type: String

Example

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

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

color_picker

The colorpicker component adds an HSV color picker dialog to the editor. When activated in conjunction with textcolor it adds a “custom color” button to the text color toolbar drop down. When a user clicks “custom color” a modal will open presenting a color wheel so that the user can choose their own colors (rather than the ones defined by textcolor) to be applied to text and/or the selected text’s background.

Since TinyMCE 5.0, the colorpicker and textcolor plugins are now builtin components, which means there is no need to declare it in the list of plugins.

The plugin hooks into the editor color_picker_callback api, which is a hook in point reserved for any color picker implementation in TinyMCE.

Type: String

Example

In this example, we have activated the toolbar forecolor and backcolor palettes.

tinymce.init({
  selector: "textarea",
  toolbar: "forecolor backcolor"
});

color_picker_callback

This option enables you to provide your own color picker. When your custom color picker returns a color value, our callback code inserts this color into the editor.

Example
tinymce.init({
  selector: "textarea",
  toolbar: "forecolor backcolor"
  color_picker_callback: function(callback, value) {
    callback('#FF00FF');
  }
});

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.

The CSS file used in this setting should be the same css file that controls the look and style of all your pages. So, let’s say you include a file myLayout.css in all your pages to control your site’s global appearance, then this file must be set as your content_css value. Doing this ensures the content in the editable area also has your site’s style.

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_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
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  content_style: "div {margin: 10px; border: 5px solid red; padding: 3px}"
});

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

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

text_color

The textcolor component adds the forecolor/backcolor button controls that enable you to pick colors from a color picker and apply them to text. It adds a toolbar button to allow this functionality.

Type: String

Example
tinymce.init({
  selector: "textarea",
  toolbar: "forecolor backcolor"
});

Options

These settings affect the execution of the textcolor. You can set the dimensions and mapping of the grid of text colors here.

color_cols

This option allows you to specify how many columns appear on the grid of text colors. The number of rows is calculated based on how many text colors are supplied divided by the specified number of columns. The textcolor_cols and textcolor_rows property has been removed in TinyMCE 5.0.

Type: String

Default Value: "5"

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

color_map

This option allows you to specify a map of the text colors that will appear in the grid.

Type: Array

Example
tinymce.init({
  selector: "textarea",  // change this value according to your HTML
  toolbar: "forecolor backcolor",
  color_map: [
    "000000", "Black",
    "993300", "Burnt orange",
    "333300", "Dark olive",
    "003300", "Dark green",
    "003366", "Dark azure",
    "000080", "Navy Blue",
    "333399", "Indigo",
    "333333", "Very dark gray",
    "800000", "Maroon",
    "FF6600", "Orange",
    "808000", "Olive",
    "008000", "Green",
    "008080", "Teal",
    "0000FF", "Blue",
    "666699", "Grayish blue",
    "808080", "Gray",
    "FF0000", "Red",
    "FF9900", "Amber",
    "99CC00", "Yellow green",
    "339966", "Sea green",
    "33CCCC", "Turquoise",
    "3366FF", "Royal blue",
    "800080", "Purple",
    "999999", "Medium gray",
    "FF00FF", "Magenta",
    "FFCC00", "Gold",
    "FFFF00", "Yellow",
    "00FF00", "Lime",
    "00FFFF", "Aqua",
    "00CCFF", "Sky blue",
    "993366", "Red violet",
    "FFFFFF", "White",
    "FF99CC", "Pink",
    "FFCC99", "Peach",
    "FFFF99", "Light yellow",
    "CCFFCC", "Pale green",
    "CCFFFF", "Pale cyan",
    "99CCFF", "Light sky blue",
    "CC99FF", "Plum"
  ]
});

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
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
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  visual_table_class: 'my-custom-class'
});

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
tinymce.init({
  selector: 'textarea',  // change this value according to your HRML
  visual: false
});

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.