CKEditor 5 Sup Fix

CKEditor5 Sup Fix

Following lessons learned developing CKEditor5 Table Fix and CKEditor5 Label Fix which you may also want to consider.

A lightweight plugin that restores HTML <sup> markup support (like for example:

CKEditor 4 accepted this:

<sup id="fn1-1-rf"><a class="fn-lnk" href="#fn1"><span class="wb-inv">Footnote </span>1</a></sup>

CKEditor 5 without the ckeditor5_sup_fix dummy fix plugin turns the above into this (SURPRISE!):

<a class="fn-lnk" href="#fn1"><span class="wb-inv"><sup id="fn1-1-rf">Footnote </sup></span><sup id="fn1-1-rf">1</sup></a>

Features

ckeditor5_sup_fix is especially useful after upgrading from CKEditor4.

• With the ckeditor5_sup_fix plugin the markup now renders as follows:

<sup id="fn1-1-rf"><a class="fn-lnk" href="#fn1"><span class="wb-inv">Footnote </span>1</a></sup>

• Provides a faux CKEditor button for easy enablement (just drag the dummy icon down to the editor bar and then save configuration)
• Works with Drupal 10/11 and any text format using CKEditor5
• Designed for upgraded sites coming from CKEditor4 that need legacy sup markup preserved

Use cases:

• Government and enterprise sites with legacy or semantic <sup> markup
• WCAG-compliant <sup> elements
• Any site where CKEditor 5 strips valid <sup> structure and formatting

Post-Installation

1. Enable the CKEditor5 Sup Fix plugin on the same text format. Look for the “Sup 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 <sup> markup.

Additional Requirements

None. This module only requires Drupal core CKEditor 5 support and does not depend on contrib modules.

Related projects

• CKEditor5 Table Fix
• CKEditor5 Label Fix
• CKEditor5 Definition List Fix