CKEditor 5 Label Fix
3 sites
Security covered
This module restores proper HTML label markup support in CKEditor 5, which is particularly helpful for sites upgrading from CKEditor 4. It ensures that elements like labels associated with inputs are not broken by the editor, preserving semantic structure and accessibility compliance.
CKEditor5 Label Fix
Following lessons learned developing CKEditor5 Table Fix.
A lightweight plugin that restores HTML label markup support (like for example:
CKEditor 4 accepted this:
<ul>
<li class="checkbox" id="chbx-p2">
<input class="action-checkbox-2 cb-dmm" id="eg5-2" type="checkbox">
<label for="eg5-2">You hold a federal wine licence issued by the Canada Revenue Agency (CRA) under <a href="https://laws-lois.justice.gc.ca/eng/acts/e-14.1/page-2.html#h-179017">section 14 of the <cite>Excise Act, 2001</cite></a>, valid at the time you apply to the program and up to or after March 31, 2026
</label>
</li>
</ul>
CKEditor 5 without the ckeditor5_label_fix plugin turns the above into this (SURPRISE!):
<ul>
<li class="checkbox" id="chbx-p2">
<input class="action-checkbox-2 cb-dmm" id="eg5-2" type="checkbox">
<label for="eg5-2">You hold a federal wine licence issued by the Canada Revenue Agency (CRA) under </label>
<a href="https://laws-lois.justice.gc.ca/eng/acts/e-14.1/page-2.html#h-179017"><label for="eg5-2">section 14 of the </label></a>
<cite><a href="https://laws-lois.justice.gc.ca/eng/acts/e-14.1/page-2.html#h-179017"><label for="eg5-2">Excise Act, 2001</label></a></cite>
<label for="eg5-2">, valid at the time you apply to the program and up to or after March 31, 2026</label>
</li>
</ul>Features
ckeditor5_label_fix is especially useful after upgrading from CKEditor4.
- With the ckeditor5_label_fix plugin the markup now renders as follows:
<ul>
<li class="checkbox" id="chbx-p2">
<input class="action-checkbox-2 cb-dmm" id="eg5-2" type="checkbox"> <label for="eg5-2">You hold a federal wine licence issued by the Canada Revenue Agency (CRA) under <a href="https://laws-lois.justice.gc.ca/eng/acts/e-14.1/page-2.html#h-179017">section 14 of the </a><cite><a href="https://laws-lois.justice.gc.ca/eng/acts/e-14.1/page-2.html#h-179017">Excise Act, 2001</a></cite>, valid at the time you apply to the program and up to or after March 31, 2026 </label>
</li>
</ul>- Provides a faux CKEditor button for easy enablement
- Works with Drupal 10/11 and any text format using CKEditor5
- Designed for upgraded sites coming from CKEditor4 that need legacy label markup preserved
Use cases:
- Government and enterprise sites with legacy or semantic label markup
- WCAG-compliant label elements
- Any site where CKEditor 5 strips valid label structure and formatting
Post-Installation
- Enable the CKEditor5 Label Fix plugin on the same text format. Look for the “Label Fix Dummy” button and add it to the toolbar.
- Save your text format — the plugin is now active.
No visible button will appear in the CKEditor UI, but the plugin will be loaded silently in the background to preserve your full label markup.
Additional Requirements
None. This module only requires Drupal core CKEditor 5 support and does not depend on contrib modules.