---
title: "Footnotes plugin"
description: "Insert footnotes into the TinyMCE editor"
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/footnotes/"
md_url: "https://www.tiny.cloud/docs/tinymce/6/footnotes/index.md"
version: "6"
last_updated: "2026-06-15T08:51:58Z"
tokens: 1745
---
Important This page documents TinyMCE 6. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../latest/footnotes/).
# Footnotes plugin

> **Note:** This plugin is only available for [paid TinyMCE subscriptions](/pricing/).

> **Note:** 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

**Example**

```js
tinymce.init({
  selector: 'textarea#footnotes',
  plugins: 'code footnotes link',
  toolbar: 'bold italic underline | footnotes | link code'
});
```

## Basic setup

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

> **Note:** 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`](../add-css-options/#content_css) stylesheet.

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

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

```js
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 [`toolbar`](../toolbar-configuration-options/#toolbar) configuration option.
- The [`quickbars_insert_toolbar`](../quickbars/#quickbars_insert_toolbar) configuration option.
- [Custom Context toolbars](../contexttoolbar/).

## Menu items

The Footnotes plugin provides the following menu items:

| Menu item identifier | [Default Menu Location](../menus-configuration-options/#example-the-tinymce-default-menu-items) | 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:

- The [`menu`](../menus-configuration-options/#menu) configuration option.
- The [`contextmenu`](../menus-configuration-options/#contextmenu) configuration option.
- [Custom Menu toolbar buttons](../custom-menu-toolbar-button/).

## 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
```js
tinymce.activeEditor.execCommand('mceInsertFootnote');
tinymce.activeEditor.execCommand('mceUpdateFootnotes');
```