Visual Blocks plugin
Allows a user to see block level elements such as paragraphs.
Contribute to this pageThis 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',
menubar: 'view',
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
Default Value: false
Possible Values: true
, false
Example: Using visualblocks_default_state
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'visualblocks',
menubar: 'view',
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
toolbar
configuration option. - The
quickbars_insert_toolbar
configuration option. - Custom Context toolbars.
Menu items
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:
- The
menu
configuration option. - The
contextmenu
configuration option. - Custom Menu toolbar buttons.
Commands
The Visual Blocks plugin provides the following JavaScript command.
Command | Description |
---|---|
mceVisualBlocks | Toggles visual blocks on/off. |
Example
tinymce.activeEditor.execCommand('mceVisualBlocks');
Was this article helpful? Yes - No
Well, that's awkward . Would you mind opening an issue or helping us out?
Thanks for the feedback!
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.