Footnotes and Endnotes in ASP.NET Core DOCX Editor

14 Aug 20263 minutes to read

ASP.NET Core DOCX Editor (Document Editor) Container component provides support for inserting footnotes and endnotes through the in-built toolbar.

Insert footnote endnote

The footnotes and endnotes are both ways of adding extra bits of information to your writing outside of the main text. You can use footnotes and endnotes to add side comments to your work or to place other publications like books, articles, or websites.

Insert footnotes

The Document Editor exposes an API to insert footnotes at the cursor position programmatically or at the end of the selected text.

<ejs-button id="insertFootnote">insert Footnote</ejs-button>
<div id="documenteditor" style="width:100%;height:100%">
    <ejs-documenteditor isReadOnly=false enableEditor=true enableSelection=true enableSfdtExport=true id="DocumentEditor"></ejs-documenteditor>
</div>
<script>
    var documenteditor;
    document.addEventListener('DOMContentLoaded', function () {
        documenteditor = document.getElementById('DocumentEditor').ej2_instances[0];
        documenteditor.resize();
    });    
    document.getElementById('insertFootnote').addEventListener('click', function () {
        documenteditor.editor.insertFootnote();
    });
</script>
public ActionResult Default()
{
    return View();
}

Insert endnotes

The Document Editor exposes an API to insert endnotes at the cursor position programmatically or at the end of the selected text.

<ejs-button id="InsertEndnote">Insert Endnote</ejs-button>
<div id="documenteditor" style="width:100%;height:100%">
    <ejs-documenteditor isReadOnly=false enableEditor=true enableSelection=true enableSfdtExport=true id="DocumentEditor"></ejs-documenteditor>
</div>
<script>
    var documenteditor;
    document.addEventListener('DOMContentLoaded', function () {
        documenteditor = document.getElementById('DocumentEditor').ej2_instances[0];
        documenteditor.resize();
    });    
    document.getElementById('InsertEndnote').addEventListener('click', function () {
        documenteditor.editor.insertEndnote();
    });
</script>
public ActionResult Default()
{
    return View();
}

Update or edit footnotes and endnotes

You can update or edit the footnotes and endnotes using the built-in context menu displayed by right-clicking them. The Footnote/Endnote dialog box appears, where you can customize the number format and start-at value.

Update or edit footnotes and endnotes

Online Demo

Explore how to add and manage notes in Word documents using the ASP.NET Core Document Editor in this live demo here.