Show Blocks Plugin

This plugin adds the ability to visualize all block-level elements in the editor by surrounding them with an outline and displaying their element name at the top-right. This is particularly useful for understanding the structure of your content and identifying different HTML elements.

Features

• Adds a "Show Blocks" button to the toolbar in the "state" group
• Outlines all specified HTML elements with a dashed border
• Displays the element name at the top-right corner of each element
• Provides commands to enable, disable, or toggle the feature
• Supports customization of colors and which elements to highlight

Installation

If you are using a fat build of the editor, then the plugin is already included in it. If you are using the slim build, then you need to enable it manually:

Jodit.make('#editor', {
    extraPlugins: ['show-blocks']
});
Copy

Options

showBlocks.enable

• Type: boolean
• Default: false

Enables or disables the show blocks feature when the editor is initialized.

Jodit.make('#editor', {
    showBlocks: {
        enable: true
    }
});
Copy

showBlocks.color

• Type: string
• Default: '#ccc'

Sets the color of the outlines and element names.

Jodit.make('#editor', {
    showBlocks: {
        color: '#ff0000' // Red outlines and element names
    }
});
Copy

showBlocks.tagList

• Type: string[]
• Default: See below

An array of HTML tag names that will be highlighted when the show blocks feature is enabled.

Default value includes most HTML elements:

[
    'html', 'body', 'div', 'span', 'applet', 'object', 'iframe',
    'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'blockquote', 'pre',
    'a', 'abbr', 'acronym', 'address', 'big', 'cite', 'code',
    'del', 'dfn', 'em', 'img', 'ins', 'kbd', 'q', 's', 'samp',
    'small', 'strike', 'strong', 'sub', 'sup', 'tt', 'var',
    'b', 'u', 'i', 'center', 'dl', 'dt', 'dd', 'fieldset',
    'form', 'label', 'legend', 'caption', 'th', 'td', 'li',
    'ol', 'ul', 'article', 'aside', 'canvas', 'details',
    'embed', 'figure', 'figcaption', 'footer', 'header',
    'hgroup', 'menu', 'nav', 'output', 'ruby', 'section',
    'summary', 'time', 'mark', 'audio', 'video'
]
Copy

You can customize this list to highlight only specific elements:

Jodit.make('#editor', {
    showBlocks: {
        tagList: ['p', 'div', 'h1', 'h2', 'h3', 'blockquote']
    }
});
Copy

Commands

The plugin registers the following commands that can be executed programmatically:

enableShowBlocks

Enables the show blocks feature.

const editor = Jodit.make('#editor');
editor.execCommand('enableShowBlocks');
Copy

disableShowBlocks

Disables the show blocks feature.

const editor = Jodit.make('#editor');
editor.execCommand('disableShowBlocks');
Copy

toggleShowBlocks

Toggles the show blocks feature on or off.

const editor = Jodit.make('#editor');
editor.execCommand('toggleShowBlocks');
Copy

Usage Examples

Basic Usage

const editor = Jodit.make('#editor', {
    buttons: ['showBlocks'],
    showBlocks: {
        enable: false, // Disabled by default
        color: '#ccc'
    }
});

// Toggle show blocks when needed
editor.execCommand('toggleShowBlocks');
Copy

Custom Configuration

const editor = Jodit.make('#editor', {
    buttons: ['bold', 'italic', '|', 'showBlocks'],
    showBlocks: {
        enable: true, // Enabled by default
        color: '#3498db', // Blue color
        tagList: ['p', 'div', 'h1', 'h2', 'h3', 'ul', 'ol', 'li'] // Only highlight these elements
    }
});
Copy

Adding to a Custom Toolbar Group

const editor = Jodit.make('#editor', {
    toolbar: {
        items: [
            'source', '|',
            'bold', 'italic', '|',
            'ul', 'ol', '|',
            {
                group: 'view-options',
                buttons: ['showBlocks']
            }
        ]
    },
    showBlocks: {
        enable: false,
        color: '#27ae60' // Green color
    }
});
Copy

How It Works

1. When enabled, the plugin adds CSS rules to the editor that outline the specified HTML elements
2. Each element is given a dashed outline in the specified color
3. The element's tag name is displayed at the top-right corner using an SVG background image
4. The plugin handles RTL text direction automatically, placing the tag name at the appropriate side
5. When disabled, all added CSS rules are removed

This visual aid helps content creators understand the structure of their document and identify different HTML elements without having to view the source code.