Footnotes plugin

This plugin is only available for paid TinyMCE subscriptions.
This feature is only available for TinyMCE 6.2 and later.

The Footnotes plugin allows the user to insert a footnote into the TinyMCE editor.

Each time a footnote is added, a superscripted footnote number is placed at the current insertion point, or at the end of the current selection.

The plugin then adds a new line to the footnotes section located at the bottom of the editor and moves the insertion point to this new line. This allows for the immediate creation of the contents of the footnote entry related to the newly-created footnote.

Interactive Example

  • TinyMCE

  • HTML

  • CSS

  • JS

  • Edit on CodePen

<div id="tiny-ui">
  <textarea id="footnotes" style="width: 100%; height: 500px;">
    <h2>Welcome to Footnotes</h2>
    <p>Try this demo of the Footnotes<sup id="footnote_34327763141662096813220" class="mce-footnote"><a href="#footnotes_entry_34327763141662096813220">1</a></sup> Premium Plugin.</p>
    <ol>
      <li>Place the insertion point where the new footnote should appear.<sup id="footnote_46102500311662090427490" class="mce-footnote"><a href="#footnotes_entry_46102500311662090427490">2</a></sup></li>
      <li>Click the <em>Insert Footnote</em> icon in the toolbar, or choose <em>Insert > Insert footnote</em> from the TinyMCE menu.</li>
      <li>A superscripted footnote number is added to the document.</li>
      <li>And the insertion point is moved down to a new entry in the footnotes section at the bottom of the TinyMCE editor.<sup id="footnote_795387001171662097474091" class="mce-footnote"><a href="#footnotes_entry_795387001171662097474091">3</a></sup></li>
      <li>Anything typed immediately following adding a footnote number is added to the footnote entry.<sup id="footnote_83105724181662097486697" class="mce-footnote"><a href="#footnotes_entry_83105724181662097486697">4</a></sup>.</li>
    </ol>
    <p>Footnotes are available for TinyMCE as a Premium Plugin<sup id="footnote_6878577521662090521962" class="mce-footnote"><a href="#footnotes_entry_6878577521662090521962">5</a></sup>. To test Footnotes in your own TinyMCE environment, sign up for a Tiny account. New Tiny accounts include 14-day free trials of all Tiny Premium Plugins, including Footnotes.</p>
    <div class="mce-footnotes"><hr>
      <ol>
        <li id="footnotes_entry_34327763141662096813220"><a class="mce-footnotes-backlink" href="#footnote_34327763141662096813220">^&nbsp;</a><span class="mce-footnotes-note">The Footnotes plugin works with TinyMCE 6.2 or later and is available with all TinyMCE Premium Plans.</span></li>
        <li id="footnotes_entry_46102500311662090427490"><a class="mce-footnotes-backlink" href="#footnote_46102500311662090427490">^&nbsp;</a><span class="mce-footnotes-note">If there is a highlighted selection when a footnote is added, the new footnote is added to the end of the highlighted selection.&nbsp;</span></li>
        <li id="footnotes_entry_795387001171662097474091"><a class="mce-footnotes-backlink" href="#footnote_795387001171662097474091">^&nbsp;</a><span class="mce-footnotes-note">Scrolling the document to the end, if necessary.</span></li>
        <li id="footnotes_entry_83105724181662097486697"><a class="mce-footnotes-backlink" href="#footnote_83105724181662097486697">^&nbsp;</a><span class="mce-footnotes-note">The footnotes section contains every footnote entry.</span></li>
        <li id="footnotes_entry_6878577521662090521962"><a class="mce-footnotes-backlink" href="#footnote_6878577521662090521962">^&nbsp;</a><span class="mce-footnotes-note">See <a href="https://tiny.cloud/docs/tinymce/6/plugins/">Premium plugins</a> for details.</span></li>
      </ol>
    </div>
  </textarea>
</div>
div.mce-footnotes hr {
  margin-inline-end: auto;
  margin-inline-start: 0;
  width: 25%;
}

div.mce-footnotes li > a.mce-footnotes-backlink {
  text-decoration: none;
}

@media print {
  sup.mce-footnote a {
    color: black;
    text-decoration: none;
  }
  div.mce-footnotes {
    break-inside: avoid;
    width: 100%;
  }
  div.mce-footnotes li > a.mce-footnotes-backlink {
    display: none;
  }
}
tinymce.init({
  selector: 'textarea#footnotes',
  plugins: 'code footnotes link',
  toolbar: 'bold italic underline | footnotes | link code'
});

Basic setup

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'footnotes',
  toolbar: 'footnotes',
});

The footnotes section, which is placed at the bottom of the TinyMCE editor, is created when the first footnote is added.

Footnotes can be inserted with

  • the Insert footnote button, located on the toolbar;

  • the Insert > Insert Footnote command from the menu bar;

  • or the mceInsertFootnote command.

The footnotes section is automatically updated whenever a footnote is inserted, reordered, or removed within the TinyMCE editor. The footnotes section is automatically removed if all footnotes are removed.

For example, adding a new footnote between already extant footnotes 1 and 2 results in the new footnote becoming footnote 2 and the previous footnote 2 automatically becoming footnote 3.

Superscripted footnote numbers can also be dragged to a different position in the document. Footnote numbers and their relationship with the respective footnote entry are automatically updated when they are dragged to a different position.

Each superscripted footnote number links to its respective footnote entry, and each footnote entry is prefixed with a caret — ^ — that links back to its respective superscripted footnote number. This allows for navigation between the editor content and the footnotes section.

If the TinyMCE document is large enough to produce a scroll bar, clicking the caret prefixing a footnote entry scrolls the document back to the line containing said entry’s superscripted footnote number.

Although the viewport scrolls back to the line containing the footnote number, the insertion point is not changed. Users must move the insertion point by, for example, clicking the I-beam pointer somewhere in the now-scrolled document.

CSS

The following CSS is used in the internal content.css within TinyMCE. It can be overridden with a custom content_css stylesheet.

To make footnotes display correctly outside of TinyMCE, add this CSS to the published webpage.

div.mce-footnotes hr {
  margin-inline-end: auto;
  margin-inline-start: 0;
  width: 25%;
}

div.mce-footnotes li > a.mce-footnotes-backlink {
  text-decoration: none;
}

@media print {
  sup.mce-footnote a {
    color: black;
    text-decoration: none;
  }
  div.mce-footnotes {
    break-inside: avoid;
    width: 100%;
  }
  div.mce-footnotes li > a.mce-footnotes-backlink {
    display: none;
  }
}

Usage notes

The update footnotes button

The update footnotes button, as its name implies, updates the state of all footnotes in a TinyMCE document.

To add the update footnote button to the TinyMCE toolbar, add footnotesupdate to the toolbar.

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'footnotes',
  toolbar: 'footnotes footnotesupdate',
});

In the main, footnotes update automatically as they are added, removed, or edited. However, there are some circumstances where user-edits change footnote state but the footnotes themselves do not update.

For example, when an image caption with an attached footnote is removed (by unchecking the Show caption checkbox in the Insert/Edit Image dialog), the associated footnote text is not automatically removed.

In similar fashion, if a table row or column that contains a footnote is removed, the associated footnote text is not automatically removed.

These orphan footnote texts can be deleted manually. They can also be removed by clicking the footnotesupdate button in the toolbar.

Formatting superscripted footnote numbers

  1. Superscripted footnote numbers cannot be inline-formatted

    If a selected string includes a superscripted footnote number and inline-formatting is applied to that string, the superscripted footnote number does not take on the applied formatting.

    Inline-formatting includes setting a string to Bold or Italic or monospaced.

  2. Superscripted footnote numbers can be block-formatted

    If a selected string includes a superscripted footnote number and block-formatting is applied to that string, the superscripted footnote number takes on the applied formatting.

    Block-formatting includes making a selection a Heading of any level or setting the selection to Preformatted.

Formatting footnote text

  1. Footnote text can be inline-formatted

    Footnote text can be formatted using inline-formatting options such as Bold, Italic, or monospaced.

  2. Footnote text cannot be block-formatted

    Footnote text cannot, for example, be made into a Heading, or set as Preformatted.

Toolbar buttons

The Footnotes plugin provides the following toolbar buttons:

Toolbar button identifier Description

footnotes

Inserts a superscripted footnote number into the editor at the selection, and creates a new entry in the footnotes section linked to that footnote.

footnotesupdate

Manually updates the state of all footnotes in a TinyMCE document.

These toolbar buttons can be added to the editor using:

The Footnotes plugin provides the following menu items:

Menu item identifier Default Menu Location Description

footnotes

Insert

Inserts a superscripted footnote number into the editor at the selection, and creates a new entry in the footnotes section linked to that footnote.

footnotesupdate

Not Applicable

Manually updates the state of all footnotes in a TinyMCE document.

These menu items can be added to the editor using:

Commands

The Footnotes plugin provides the following TinyMCE commands.

Command Description

mceInsertFootnote

Inserts a superscripted footnote number into the editor at the selection, and creates a new entry in the footnotes section linked to that footnote.

mceUpdateFootnotes

Manually updates the state of all footnotes in a TinyMCE document.
Example
tinymce.activeEditor.execCommand('mceInsertFootnote');
tinymce.activeEditor.execCommand('mceUpdateFootnotes');