CKEditor 5 Label Fix

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&nbsp;14 of the <cite>Excise Act, 2001</cite></a>, valid at the time you apply to the program and up to or after March&nbsp;31,&nbsp;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&nbsp;14 of the&nbsp;</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&nbsp;31,&nbsp;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">&nbsp;<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&nbsp;14 of the&nbsp;</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&nbsp;31,&nbsp;2026&nbsp;</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

1. Enable the CKEditor5 Label Fix plugin on the same text format. Look for the “Label Fix Dummy” button and add it to the toolbar.
2. 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.

Related projects

• CKEditor5 Sup Fix
• CKEditor5 Table Fix
• CKEditor5 Definition List Fix