The footnotes plug-in provides a simple way for users to add footnotes to their HTML pages. The footnotes are displayed at the bottom of the page with hyperlinks to jump between the reference point in the content and the footnote itself.

Installation

Installing the footnotes plug-in requires two steps, installing the plug-in jar and adding the menu item the configuration file.

JavaScript for adding the plug-in jar:

elj.addJar("footnotes.jar", "com.ephox.footnotes.Footnotes");

Custom menu item to add to the configuration file:

<customMenuItem name="insFootnote" action="raiseEvent" value="addFootnote"
text="Insert Footnote" shortcut="control shift F" />

Additionally, the following CSS will improve the look of the footnotes:

p.footnote {
  font-size: smaller;
  font-family: Arial;
}
a.footnote {
  vertical-align: sup;
  font-size: smaller;
}

Usage

Users can insert a footnote by selecting the "Insert Footnote" menu item, or typing ctrl-shift-F. A new footnote marker will be inserted at the current caret position and a new footnote added to the end of the page. The caret will be positioned ready for the user to type the content of the footnote.

Required Libraries

None.

Known Limitations

• In some browsers, the unicode left-hook character used at the end of the footnote renders as a box.
• Footnotes don't renumber when new footnotes are inserted before existing ones.

Download

Get the footnotes plug-in.

Ephox Technical Support does not cover LiveWorks! code, integrations or plug-ins.
Please direct any support requests or general enquiries about any LiveWorks! code, integrations or plug-ins to the LiveWorks! community mailing list.  This code is released as-is with no support and no warranty and is installed at your own risk.  We recommend thorough testing of any LiveWorks! project before deploying to any production system.