TinyMCE footnotes: keep numbered references connected as a document changes

Enable TinyMCE's footnotes plugin and add footnotes to the toolbar to insert a numbered reference with a linked entry at the bottom of the document. The plugin maintains numbering when references move. Include footnotesupdate when authors need to clean up entries left behind by structural edits. Footnotes is a paid-subscription feature in the current documentation, checked October 23, 2026. Footnotes documentation

Consider an equipment-loan policy with two supporting notes: one explains where the return deadline came from, and another identifies the inspection checklist. An editor inserts a new note between them. Typing superscript numbers by hand would leave the old second note numbered incorrectly; a connected reference system should renumber it and retain its destination.

Add insertion and maintenance controls

Merge these options into an existing TinyMCE installation that has access to Footnotes:

const policyFootnotes = {
  plugins: 'footnotes',
  toolbar: 'footnotes footnotesupdate'
};

Preserve the application's other plugins, toolbar controls, loading configuration, and license settings. This fragment does not initialize an editor or enable a subscription by itself.

Place the cursor immediately after the sentence needing a note, then choose Insert footnote. TinyMCE places the superscript reference at the cursor, creates an entry in the bottom section, and moves the insertion point to that entry. With text selected, the reference goes at the end of the selection. Type the source or explanation there.

For the loan policy, use these deliberately fictional source labels while testing:

Sentence Note text
Return equipment before the desk closes. Equipment desk procedure, revision 4, section 2.
Staff record the condition at return. Return inspection checklist, revision 2.

Replace those labels with the real sources before publishing. A correctly linked footnote does not establish that the source exists or supports the sentence.

Check the reference in both directions

The superscript links to its footnote entry. Each entry has a caret backlink to the corresponding reference. Verify both destinations after saving and reopening the policy, particularly if the publication pipeline cleans IDs, classes, or fragment links.

Do not use a displayed number as a permanent external identifier. Inserting a note between the original first and second references changes the old second number to three. A comment such as “check footnote 2” needs the document revision or the source text to remain understandable later.

TinyMCE documents a small navigation detail: clicking a backlink can scroll to the reference without moving the editing insertion point. Click where you intend to type before continuing the policy. The visible viewport and the text cursor can otherwise refer to different places.

Clean entries after deleting their containing structure

Ordinary insertion, reordering, and removal update footnotes automatically. Some structural operations need a manual update. The documented examples include removing an image caption containing a reference and deleting a table row or column that contains one. The corresponding note text can remain at the bottom.

Use the Update footnotes control after that kind of edit. For an existing initialized editor, the documented commands are:

editor.execCommand('mceInsertFootnote');
// Run separately when the author requests a cleanup.
editor.execCommand('mceUpdateFootnotes');

These are separate actions, not a suggestion to insert a new reference every time the application performs cleanup. Recheck the remaining notes against the actual policy text before saving.

Footnote styling in the editing surface does not automatically give the receiving page the same stylesheet. TinyMCE provides publication CSS on the plugin page, including rules for the footnote separator, backlinks, and printing. Add the relevant content styles to the reader page and retain the linked IDs through the approved storage and rendering path.

The TinyMCE content stylesheet guide explains that editor-versus-reader boundary. The current-content guide covers capturing the latest document when saving.

Before releasing the equipment-loan policy, insert a third reference between the two original ones, remove a referenced table row in a development copy, and update the notes. Reopen the saved result at a narrow width. Read each surviving source beside its sentence and follow its return link; the next staff member needs the correct explanation, even after the numbering changes.

Keep reading