CKEditor Ecosystem Documentation
Search
Contribute to this guide
Home/CKEditor 5/Features

Show blocks

The show blocks feature allows the content creators to visualize all block-level elements (except for widgets). It surrounds them with an outline and displays their element name in the top-left corner of the box.

# Demo

Toggle the block elements visibility with the show block Show blocks toolbar button to see the feature in action. The content remains editable, so you can see how the blocks adjust to the content structure on the go. These outlines are not visible in the export to PDF and export to Word features, so there is no need to remove them before exporting.

The three greatest things you learn from traveling

Like all the great things on earth traveling teaches us by example. Here are some of the most precious lessons I’ve learned over the years of traveling.

Appreciation of diversity

Getting used to an entirely different culture can be challenging. While it’s also nice to learn about cultures online or from books, nothing comes close to experiencing cultural diversity in person. You learn to appreciate each and every single one of the differences while you become more culturally fluid.

The real voyage of discovery consists not in seeking new landscapes, but having new eyes.

Marcel Proust

Improvisation

Life doesn't allow us to execute every single plan perfectly. This especially seems to be the case when you travel. You plan it down to every minute with a big checklist. But when it comes to executing it, something always comes up and you’re left with your improvising skills. You learn to adapt as you go. Here’s how my travel checklist looks now:

  • buy the ticket
  • start your adventure
Three monks ascending the stairs of an ancient temple.
Three monks ascending the stairs of an ancient temple.

Confidence

Going to a new place can be quite terrifying. While change and uncertainty make us scared, traveling teaches us how ridiculous it is to be afraid of something before it happens. The moment you face your fear and see there is nothing to be afraid of, is the moment you discover bliss.

This demo presents a limited set of features. Visit the feature-rich editor example to see more in action.

# Installation

⚠️ New import paths

Starting with version 42.0.0, we changed the format of import paths. This guide uses the new, shorter format. Refer to the Packages in the legacy setup guide if you use an older version of CKEditor 5.

After installing the editor, add the feature to your plugin list and toolbar configuration:

import { ClassicEditor, ShowBlocks } from 'ckeditor5';

ClassicEditor
	.create( document.querySelector( '#editor' ), {
		licenseKey: '<YOUR_LICENSE_KEY>', // Or 'GPL'.
		plugins: [ ShowBlocks, /* ... */ ],
		toolbar: [ 'showBlocks', /* ... */ ],
	} )
	.then( /* ... */ )
	.catch( /* ... */ );

Read more about installing plugins and toolbar configuration.

# Known issues

  • The show blocks feature does not support widgets, yet. It means it will currently not show block outlines for example for images or tables. Feel free to upvote 👍  this issue on GitHub if it is important for you.
  • At present, the show blocks feature is not yet fully compatible with the pagination feature. Using these two together may result in errors.

Other CKEditor 5 features related to HTML editing that you may want to check:

  • General HTML Support – Allows you to enable HTML features (elements, attributes, classes, styles) that are not supported by other dedicated CKEditor 5 plugins.
  • Source editing – Provides the ability for viewing and editing the source of the document.
  • Full page HTML – Allows using CKEditor 5 to edit entire HTML pages, from <html> to </html>, including the page metadata.

# Common API

The ShowBlocks plugin registers the 'showBlocks' UI button component and the 'showBlocks' command implemented by ShowBlocksCommand.

You can execute the command using the editor.execute() method:

// Toggle the visibility of block-level elements outline.
editor.execute( 'showBlocks' );

We recommend using the official CKEditor 5 inspector for development and debugging. It will give you tons of useful information about the state of the editor such as internal data structures, selection, commands, and many more.

# Contribute

The source code of the feature is available on GitHub at https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-show-blocks.