Problem/Motivation
When authoring content it is hard to see which elements already carry an ID
(for anchors, in-page links, JS/CSS targeting). Today you have to open Source
editing to check. It would help to optionally surface each element's ID
directly in the editor.
Proposed resolution
Add a per text format option "Show element IDs in the editor". When enabled,
each element that has a custom ID shows a small badge with its ID above it, in
the editing view only — the saved markup is never changed.
Implementation notes
- A configurable plugin class (CKEditor5PluginConfigurableInterface) adds the
checkbox and injects `idAttributes.showLabels` into the editor config.
- The badge is produced by an editing-downcast-only converter that mirrors the
custom id onto a `data-id-label` view attribute, plus a CSS ::before badge.
Nothing is added to the data downcast, so output HTML is untouched.
- The feature ships as a separate CKEditor 5 plugin built into its own bundle
(js/build/idAttributesLabels.js), so it does not modify the existing
idAttributes bundle. This keeps it independent from other changes/patches.
- For tables the badge is hosted on the wrapper, since
::before on a display:table box does not render reliably.
User interface changes
- New checkbox "Show element IDs in the editor" in the plugin settings of the
text format configuration.
| Comment | File | Size | Author |
|---|---|---|---|
| #2 | 3605548-ckeditor_id_attributes-show-id-labels.patch | 10.46 KB | hesslinger |
Issue fork ckeditor_id_attributes-3605548
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
Comments
Comment #2
hesslinger commentedComment #3
hesslinger commentedComment #7
dieterholvoet commentedWorks great, good idea!