Footnotes
Provides automatically numbered footnote references for CKEditor 5 with citations, backlinks, and customizable grouping options.
footnotes
Overview
The Footnotes module enables content editors to easily create automatically numbered footnote references in articles or posts, such as references to URLs or academic citations. It provides a CKEditor 5 toolbar button that opens a modal window where users can add formatted content (bold, italics, links) within footnote sources.
The module automatically creates citations in the text (e.g., [1], [2]) and generates a footnotes reference section at the bottom of the content. Each citation links to its corresponding reference, and backlinks allow users to jump back to the citation point in the text. Multiple citations can reference the same footnote, and identical footnotes can be collapsed into a single reference number.
For complex layouts with multiple text fields, the module provides a Footnotes Group block that collects all footnotes from a page and displays them in a single consolidated reference section. The module also integrates with Search API to exclude citation markers from search indexes.
Features
- CKEditor 5 toolbar button for inserting footnotes with a modal dialog interface
- Automatic footnote numbering with customizable manual values
- Citation links that jump to the reference section and backlinks to return to the citation
- Support for multiple citations referencing the same footnote with alphabetical suffixes (1a, 1b, 1c)
- Option to collapse identical footnote content into a single reference number
- Footnotes Group block for consolidating footnotes from multiple text fields into one reference section
- JavaScript-based grouping for lazy-loaded content scenarios
- Dialog mode option to display footnote content in a popup instead of jumping to the reference section
- Search API processor to exclude footnote citations from search indexes
- Drush command for upgrading content from Footnotes 3.x to 4.x format
- Themeable templates for citations, citation groups, and reference lists
- CKEditor 4 to CKEditor 5 automatic upgrade path for toolbar configuration
- Support for pasting footnotes from Microsoft Word and LibreOffice documents
Use Cases
Academic or research articles with citations
Use footnotes to add source citations to academic content. Each citation gets an automatic number that links to the full reference at the bottom of the article. Readers can click citations to see references and use backlinks to return to their reading position.
Legal documents with references
Legal content often requires numbered references to laws, court cases, or other documents. The footnotes module provides automatic numbering and can collapse identical references to the same number when the same source is cited multiple times.
Long-form articles with explanatory notes
Journalists and content writers can use footnotes to add clarifying information without interrupting the main narrative. Enable the dialog option to show footnote content in a popup instead of jumping to the bottom of the page.
Pages with multiple content sections
For pages that combine content from multiple fields (like body text and sidebar content), use the Footnotes Group block to collect all footnotes into a single consolidated reference section. Place the block after the main content area.
Content with lazy-loaded components
When footnotes appear in lazy-loaded content (like AJAX-loaded sections), enable the 'Group footnotes using JavaScript' option in the Footnotes Group block to ensure all footnotes are captured and properly numbered.
Migrating content from other systems
Content pasted from Microsoft Word or LibreOffice that contains footnotes can be handled by the module. Use the debug mode (add ?debug=1 to the URL) to troubleshoot paste issues. The Drush upgrade command handles migration from Footnotes 3.x format.
Tips
- Copy templates to your theme directory and clear the theme registry cache (drush cc theme-registry) to customize footnote appearance
- Use the 'Collapse footnotes with identical content' option to automatically combine duplicate citations into the same reference number
- When using the Footnotes Group block, set the entity context to 'node' to ensure proper cache invalidation
- For academic content, consider enabling the dialog option to improve user experience by showing references in a popup
- Test the upgrade Drush command thoroughly on development/staging before running on production content
Technical Details
Admin Pages 2
/admin/config/content/formats/manage/{format}
Configure the Footnotes filter settings for a specific text format. Access this by editing any text format that has the Footnotes filter enabled.
/admin/config/content/formats/manage/{format}
Configure the CKEditor toolbar used within the Footnotes modal dialog. This uses the special 'Footnote' text format.
Hooks 1
hook_footnotes_upgrade_3x4x_build_alter
Alter the render array used to produce an upgraded footnote tag when upgrading content from 3.x to 4.x format.
Drush Commands 1
drush footnotes:upgrade-3-to-4 <entity_type>
Upgrades footnote content from 3.x format (<fn> and [fn] tags) to 4.x format (<footnotes> tags with data attributes). Processes all entities of the specified type that contain formatted text fields with footnotes.
Troubleshooting 6
Ensure the Footnotes filter is enabled in your text format and appears before HTML correction filters. Clear the cache after making configuration changes.
The Footnotes filter should appear before the 'Convert line breaks' filter in the filter order. The module uses a custom spaceless Twig filter to minimize whitespace.
Enable the 'Group footnotes using JavaScript' option in the Footnotes Group block configuration. Do not disable the footnotes footer output when using this option.
Add ?debug=1 to your page URL before pasting to see console output. Check that the pasted content contains recognizable footnote markers.
Clear all caches after changing the 'Disable output of the footnotes footer' setting. This setting affects how content is rendered and cached.
This is a Drupal Core limitation - modal windows within modal windows are not supported. Use links instead of embedded media within footnotes.
Security Notes 3
- The module has official Drupal security coverage
- Footnote content is filtered through the 'footnote' text format which limits allowed HTML tags to br, p, strong, em, and links
- Access to the footnotes dialog requires the 'use text format footnote' permission