Element attributes

ElementAttributes registers the showElementAttributes command: it shows the attributes of an element, as key-value pairs, in CKEditor's modal dialog (Dialog, which the plugin loads).

import { ElementAttributes } from 'ckeditor5-elements';
import 'ckeditor5-elements/index.css';

// In the editor config:
plugins: [..., ElementAttributes];

It is an ElementOrPositionCommand, so it has a title ("Show attributes") and an icon, and works wherever the other element commands do:

• A menu item, of the context menu or of the breadcrumbs: the element of the menu.
• A button of an element toolbar: the element of the toolbar.
• The callback of a clickable element: the element that was clicked.
• Code: editor.commands.get('showElementAttributes').executeFor(element). Without a target, it shows the element at the selection (the selected element, e.g. an image, or the one with the cursor).

Source

import { Essentials, Heading, ImageBlock, ImageCaption, List, Paragraph, SourceEditing } from 'ckeditor5';
import { ElementActions, ElementAttributes, ElementContextMenu, ElementToolbar } from 'ckeditor5-elements';
import { Note } from 'ckeditor5-elements-example';
import type { Demo } from './shared/demo';

// An image that needs no network.
const image =
	'data:image/svg+xml;utf8,' +
	encodeURIComponent(
		'<svg xmlns="http://www.w3.org/2000/svg" width="160" height="90"><rect width="160" height="90" fill="#4f46e5"/></svg>'
	);

export default {
	config: {
		plugins: [
			Essentials,
			SourceEditing,
			Paragraph,
			Heading,
			List,
			ImageBlock,
			ImageCaption,
			Note,
			ElementAttributes,
			ElementActions,
			ElementContextMenu,
			ElementToolbar
		],
		toolbar: ['undo', 'redo', 'sourceEditing', '|', 'heading', 'bulletedList', 'note'],
		// A command: it is a menu item, ...
		elementContextMenu: (element, editor) => [
			editor.commands.get('showElementAttributes'),
			'|',
			editor.commands.get('duplicateElement'),
			editor.commands.get('deleteElement')
		],
		// ... and a button of a floating toolbar, which acts on the note, not on the paragraph with the cursor.
		elementToolbar: [
			{
				element: 'note',
				items: ['showElementAttributes', '|', 'moveElementUp', 'moveElementDown', 'deleteElement']
			}
		]
	},
	data:
		'<h2>Right-click a block</h2>' +
		'<p>Choose <b>Show attributes</b>. A paragraph has none; an image, a heading or a note may.</p>' +
		'<aside class="note"><p>Put the cursor in this note: its toolbar has the same command, for the note.</p></aside>' +
		`<figure class="image"><img src="${image}" alt="An image with a caption"><figcaption>A caption</figcaption></figure>`
} satisfies Demo;

What it shows

• The name of the element as the title, e.g. <imageBlock>, and a row for each attribute. An element without attributes shows "No attributes".
• Strings as they are; other values (numbers, booleans, objects) as JSON.
• Values longer than 120 characters are cut, e.g. the data of an image in a src.

The command does not change the data, so it works in read-only mode. command.getAttributes(element) returns what the dialog shows, as [key, value] pairs of text.

Styles

The table of the dialog is styled by ckeditor5-elements/index.css. The dialog itself is CKEditor's, so it follows its theme.