Footnotes plugin

This feature is only available for OpenTiny 6.2 and later.

The Footnotes plugin allows the user to insert a footnote into the OpenTiny 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

<h2>Welcome to Footnotes</h2>
 Try this demo of the Footnotes<a href="#footnotes_entry_34327763141662096813220">1</a> Premium Plugin.
 <ol>
 <li>Place the insertion point where the new footnote should appear.<a href="#footnotes_entry_46102500311662090427490">2</a></li>
 <li>Click the Insert Footnote icon in the toolbar, or choose Insert > Insert footnote from the OpenTiny 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 OpenTiny editor.<a href="#footnotes_entry_795387001171662097474091">3</a></li>
 <li>Anything typed immediately following adding a footnote number is added to the footnote entry.<a href="#footnotes_entry_83105724181662097486697">4</a>.</li>
 </ol>
 Footnotes are available for OpenTiny as a Premium Plugin<a href="#footnotes_entry_6878577521662090521962">5</a>. To test Footnotes in your own OpenTiny environment, sign up for a Tiny account. New Tiny accounts include 14-day free trials of all Tiny Premium Plugins, including Footnotes.
 <div class="mce-footnotes"><hr>
 <ol>
 <li id="footnotes_entry_34327763141662096813220"><a class="mce-footnotes-backlink" href="#footnote_34327763141662096813220">^ </a>The Footnotes plugin works with OpenTiny 6.2 or later and is available with all OpenTiny Premium Plans.</li>
 <li id="footnotes_entry_46102500311662090427490"><a class="mce-footnotes-backlink" href="#footnote_46102500311662090427490">^ </a>If there is a highlighted selection when a footnote is added, the new footnote is added to the end of the highlighted selection. </li>
 <li id="footnotes_entry_795387001171662097474091"><a class="mce-footnotes-backlink" href="#footnote_795387001171662097474091">^ </a>Scrolling the document to the end, if necessary.</li>
 <li id="footnotes_entry_83105724181662097486697"><a class="mce-footnotes-backlink" href="#footnote_83105724181662097486697">^ </a>The footnotes section contains every footnote entry.</li>
 </ol>
 </div>

<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 OpenTiny 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 OpenTiny 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 OpenTiny 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 OpenTiny 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 OpenTiny 6.2 or later and is available with all OpenTiny 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>
      </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 OpenTiny 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 OpenTiny editor. The footnotes section is automatically removed if all footnotes are removed.

For example, adding a new footnote between already extant footnotes ¹ and ² results in the new footnote becoming footnote ² and the previous footnote ² automatically becoming footnote ³.

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 OpenTiny 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 OpenTiny. It can be overridden with a custom content_css stylesheet.

To make footnotes display correctly outside of OpenTiny, 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 OpenTiny document.

To add the update footnote button to the OpenTiny 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

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.
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

Footnote text can be inline-formatted

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

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

The Footnotes plugin provides the following toolbar buttons:

Toolbar button identifier Description

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 OpenTiny document.

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 OpenTiny document.

These toolbar buttons can be added to the editor using:

The toolbar configuration option.
The quickbars_insert_toolbar configuration option.
Custom Context toolbars.

The Footnotes plugin provides the following menu items:

Menu item identifier Default Menu Location Description

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 OpenTiny document.

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 OpenTiny document.

These menu items can be added to the editor using:

The menu configuration option.
The contextmenu configuration option.
Custom Menu toolbar buttons.

Commands

The Footnotes plugin provides the following OpenTiny 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 OpenTiny document.

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 OpenTiny document.

Example

tinymce.activeEditor.execCommand('mceInsertFootnote');
tinymce.activeEditor.execCommand('mceUpdateFootnotes');

Footnotes plugin

Interactive Example

Basic setup

CSS

Usage notes

The update footnotes button

Formatting superscripted footnote numbers

Formatting footnote text

Toolbar buttons

Menu items

Commands