CKEditor 5 Sup Fix
This module restores proper support for the HTML `<sup>` tag in CKEditor 5, ensuring legacy markup is preserved. It's particularly useful for sites upgrading from CKEditor 4 that need to maintain specific `<sup>` structures and formatting for compatibility or accessibility reasons.
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
- Enable the CKEditor5 Sup Fix plugin on the same text format. Look for the “Sup 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 <sup> markup.
Additional Requirements
None. This module only requires Drupal core CKEditor 5 support and does not depend on contrib modules.