Visual Blocks plugin

This plugin allows a user to see block level elements in the editable area. It is similar to WYSIWYG hidden character functionality, but at block level. It also adds a toolbar button and a menu item Show blocks under the View menu dropdown.

Basic setup

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

Options

This setting affects the execution of the visualblocks plugin. You may specify whether blocks are visible by default here.

visualblocks_default_state

This option enables you to specify the default state of the Visual Blocks plugin.

Type: Boolean

Possible values: true, false

Default value: false

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

Toolbar buttons

The Visual Blocks plugin provides the following toolbar buttons:

Toolbar button identifier Description

visualblocks

Toggles the visibility of block elements.

These toolbar buttons can be added to the editor using:

The Visual Blocks plugin provides the following menu items:

Menu item identifier Default Menu Location Description

visualblocks

View

Toggles block visibility on/off.

These menu items can be added to the editor using:

Commands

The Visual Blocks plugin provides the following TinyMCE command.

Command Description

mceVisualBlocks

Toggles visual blocks on/off.
Example
tinymce.activeEditor.execCommand('mceVisualBlocks');