Content appearance options

Showing for "hidden" elements

visual

This option sets the initial state of the editor visual aids for bookmarks (anchor) and tables with a border width of 0. If the border of a table is set to 0, then TinyMCE adds a dotted line around the table by default.

When set to false, the visual aids will be disabled when the editor loads. The visualaid toolbar button and menu item allow users to toggle the visibility of the visual aids.

Type: Boolean

Default value: true

Possible values: true, false

Example: using visual

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

Showing "hidden" characters

To enable visual aids for "hidden" characters, see: The Visual Characters plugin

Outlining block elements

To enable outlines for block elements, see: The Visual Blocks plugin.

Premium upgrade promotion option

promotion

TinyMCE 6.2 and later includes the promotion option. It controls the presentation or otherwise of a Tiny-specific promotion button.

Type: Boolean

Default value: true in Community self-hosted instances; otherwise false.

Possible values: true, false

See Premium upgrade promotion defaults for details.

Example: using promotion

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

The Upgrade promotion appears in the unused corner of the TinyMCE menu bar. Consequently it does not appear if the menu bar is disabled.

The distribution-specific defaults are not fixed. Someone running TinyMCE as part of a Premium plan can turn this option on. And someone running the Community distribution of TinyMCE as a self-hosted instance can turn this option off.

Highlighting the content area on focus

To enable highlighting on focus for the editor,

highlight_on_focus

This feature is only available for TinyMCE 6.4 and later.

The highlight_on_focus option adds a blue outline to an instantiated TinyMCE editor when that editor is made the input focus. When using the oxide-dark skin, the outline is white.

This allows users to clearly see when the editor is in focus, or which editor has focus if more than one TinyMCE instance is available.

Type: Boolean

Default value: false

Possible values: true, false

Example: using highlight_on_focus

tinymce.init({
  selector: "textarea",
  highlight_on_focus: true
});

Using highlight_on_focus with custom skins

If a custom skin is being used, two variables can be updated to match the highlight_on_focus option’s appearance with the custom skin.

The two rules and their default values are:

@edit-area-border-color: #2D6ADF;
@edit-area-border-width: 2px;
This is entirely optional. If the default values are not changed, the highlight_on_focus option works with a custom skin exactly as it does with TinyMCE default skins.

Reducing initialization flicker

To enable synchronous iframe initialization.

init_content_sync

This feature is only available for TinyMCE 6.5 and later.

This option determines whether the iframe is initialized synchronously or asynchronously.

When disabled, the editor is initialized asynchronously using srcdoc. This can, occasionally, cause the editor to flicker during initialization.

When enabled, the editor is initialized synchronously, using document.write. This can reduce flickering.

Flickering can still occur during synchronous initialization, however, such as when loading the content css.

using the document.write method is strongly discouraged.

Type: Boolean

Default value: false

Example: using init_content_sync

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  init_content_sync: 'true',
});
When TinyMCE is running in inline mode (ie, when inline: true is set), setting init_content_sync: true has no effect.