Jodit Footnote Plugin

A plugin for Jodit Editor v4 that adds a toolbar button to insert numbered footnotes.

Features

• One-click footnote insertion via dialog
• Auto-numbering — re-numbers when you insert between existing footnotes
• Inserts in-text reference (<sup>) and appends to a footnotes list at the bottom
• Back-navigation: click the footnote number to jump to the list, click ↩ to jump back
• Keyboard shortcut: Ctrl+Enter / Cmd+Enter to insert from the dialog

Installation

<script src="/path/to/jodit.min.js"></script>
<script src="/path/to/jodit-footnote.js"></script>
<script>
  Jodit.make('#editor', {
    buttons: ['footnote' /* , ...other buttons */]
  });
</script>

Output HTML

In-text reference:

<sup id="fnref-1" class="footnote-ref"><a href="#fn-1">1</a></sup>

Footnote list at the end of content:

<hr class="footnotes-separator">
<ol class="footnotes">
  <li id="fn-1" class="footnote-item">
    <a href="#fnref-1" class="footnote-back">↩︎</a> Footnote text
  </li>
</ol>

CSS Styling

The plugin uses plain CSS classes. Here's a minimal example:

.footnote-ref a { text-decoration: none; font-weight: 700; color: #2C5778; }
.footnotes { margin-top: 32px; padding-top: 16px; border-top: 1px solid #ccc; font-size: 0.8rem; }
.footnote-item { margin-bottom: 6px; }
.footnote-back { text-decoration: none; color: #999; margin-right: 6px; }
.footnote-back:hover { color: #2C5778; }
.footnotes-separator { margin-top: 40px; border: none; border-top: 1px solid #ccc; }

Compatibility

Jodit v4.x (tested with 4.13.3). Not compatible with Jodit 3.x.

License

MIT