Hyperhyperlinks in ASP.NET MVC DOCX Editor

14 Aug 20268 minutes to read

Document editor supports hyperlink fields. You can link a part of the document content to an internet location, a file location, a mail address, or any text within the document.

Document editor triggers the requestNavigate event whenever the user clicks the Ctrl key or taps a hyperlink within the document. This event provides necessary details about link type, navigation URL, and local URL (if any) as arguments, and allows you to easily customize the hyperlink navigation functionality.

Add the requestNavigate event for DocumentEditor

The following example illustrates how to add the requestNavigate event for the DocumentEditor.

<div id="documenteditor" style="width:100%;height:100%">
    @Html.EJS().DocumentEditor("DocumentEditor").EnableSelection(true).EnableSfdtExport(true).Render()
</div>
<script>
    var documenteditor;
    document.addEventListener('DOMContentLoaded', function () {
        documenteditor = document.getElementById('DocumentEditor').ej2_instances[0];
        documenteditor.resize();
        documenteditor.requestNavigate = function (args) {
            if (args.linkType !== 'Bookmark') {
                var link = args.navigationLink;
                if (args.localReference.length > 0) {
                    link += '#' + args.localReference;
                }
                window.open(link);
                args.isHandled = true;
            }
        };
    });    
</script>
public ActionResult Default()
{
    return View();
}

Add the requestNavigate event for DocumentEditorContainer component

The following example illustrates how to add the requestNavigate event for the DocumentEditorContainer component.

<div id="documenteditor" style="width:100%;height:100%">
    @Html.EJS().DocumentEditorContainer("container").EnableToolbar(true).Render()
</div>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        var documenteditorElement;
        var container;
        documenteditor = document.getElementById('container');
        container = documenteditor.ej2_instances[0];
        container.documentEditor.requestNavigate = function (args) {
            if (args.linkType !== 'Bookmark') {
                var link = args.navigationLink;
                if (args.localReference.length > 0) {
                    link += '#' + args.localReference;
                }
                window.open(link);
                args.isHandled = true;
            }
        };

    });

</script>
public ActionResult Default()
{
    return View();
}

If the selection is in a hyperlink, trigger this event by calling the navigateHyperlink method of the Selection instance.

documenteditor.selection.navigateHyperlink();

Document editor copies link text of a hyperlink field to the clipboard if the selection is in a hyperlink.

documenteditor.selection.copyHyperlink();

To create a basic hyperlink in the document, press ENTER / SPACEBAR / SHIFT + ENTER / TAB keys after typing the address, for instance http://www.google.com. Document editor automatically converts this address to a hyperlink field. The text can be considered as a valid URL if it starts with any of the following.

NOTE

<http://>


<https://>


file:///


www.


mailto:

<div id="documenteditor" style="width:100%;height:100%">
    @Html.EJS().DocumentEditor("DocumentEditor").IsReadOnly(false).EnableEditor(true).EnableSelection(true).EnableSfdtExport(true).Render()
</div>
<script>
    var documenteditor;
    document.addEventListener('DOMContentLoaded', function () {
        documenteditor = document.getElementById('DocumentEditor').ej2_instances[0];
        documenteditor.resize();
        documenteditor.requestNavigate = function (args) {
            if (args.linkType !== 'Bookmark') {
                var link = args.navigationLink;
                if (args.localReference.length > 0) {
                    link += '#' + args.localReference;
                }
                window.open(link);
                args.isHandled = true;
            }
        };
    });    
</script>
public ActionResult Default()
{
    return View();
}

Customize screen tip

You can customize the screen tip text for the hyperlink by using the sample code below. The third argument is the screen tip string; replace the placeholder <<Screen tip text>> with your text.

documenteditor.insertHyperlink('https://www.google.com', 'Google', '<<Screen tip text>>');

Screen tip text can be modified through the UI by using the Hyperlink dialog.

Add or modify the screen tip text for hyperlinks in a Word document.

To remove the link from a hyperlink in the document, press the Backspace key at the end of a hyperlink. Removing the link converts it to plain text. You can use the removeHyperlink method of the Editor instance if the selection is in a hyperlink.

documenteditor.editor.removeHyperlink();

Document editor provides dialog support to insert or edit a hyperlink.

@Html.EJS().Button("dialog").Content("Dialog").Render()
<div id="documenteditor" style="width:100%;height:100%">
    @Html.EJS().DocumentEditor("DocumentEditor").IsReadOnly(false).EnableEditor(true).EnableSelection(true).EnableSfdtExport(true).EnableHyperlinkDialog(true).Render()
</div>
<script>
    var documenteditor;
    document.addEventListener('DOMContentLoaded', function () {
        documenteditor = document.getElementById('DocumentEditor').ej2_instances[0];
        documenteditor.resize();
    });
    //Click the Dialog button, the hyperlink dialog will open
    document.getElementById('dialog').addEventListener('click', function () {
        documenteditor.showDialog('Hyperlink');
    });
</script>
public ActionResult Default()
{
    return View();
}

You can use the following keyboard shortcut to open the hyperlink dialog if the selection is in a hyperlink.

Key Combination Description
Ctrl + K Open hyperlink dialog that allows you to create or edit a hyperlink

Online Demo

Explore how to insert and manage hyperlinks in Word documents using the ASP.NET MVC Document Editor in this live demo here.

See Also