Visual Characters plugin

This plugin adds the ability to see invisible characters like   displayed in the editable area. It also adds a toolbar control and a menu item Show invisible characters under the View menu.

Basic setup

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

Options

This setting affects the execution of the visualchars plugin. Characters can be configured to be visible by default using this option.

visualchars_default_state

This option enables specifying the default state of the Visual Characters plugin.

Type: Boolean

Possible values: true, false

Default value: false

Example: using visualchars_default_state
tinymce.init({
  selector: 'textarea',  // change this value according to the HTML
  plugins: 'visualchars',
  toolbar: 'visualchars',
  visualchars_default_state: true
});

Toolbar buttons

The Visual Characters plugin provides the following toolbar buttons:

Toolbar button identifier Description

visualchars

Toggles the visibility of non breaking character elements.

These toolbar buttons can be added to the editor using:

The Visual Characters plugin provides the following menu items:

Menu item identifier Default Menu Location Description

visualchars

View

Toggles visibility of nonbreaking spaces on/off.

These menu items can be added to the editor using:

Commands

The Visual Blocks plugin provides the following TinyMCE command.

Command Description

mceVisualChars

Toggles visual characters on/off.
Example
tinymce.activeEditor.execCommand('mceVisualChars');