Hyperlink in Blazor DocumentEditor Component

2 Aug 20233 minutes to read

Blazor Document Editor supports hyperlink field. You can link a part of the document content to Internet or file location, mail address, or any text within the document.

Blazor Document Editor triggers OnRequestNavigate event whenever user clicks Ctrl key or tap 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 OnRequestNavigate event for DocumentEditor

The following example illustrates how to add OnRequestNavigate event for DocumentEditor.

<SfDocumentEditor ID="cont" IsReadOnly="false" EnableEditor="true" EnableSelection="true" @ref="container" Height="590px">
    <DocumentEditorEvents OnRequestNavigate="OnRequestNavigate" Created="OnCreated" ></DocumentEditorEvents>
</SfDocumentEditor>

@code {
    SfDocumentEditorContainer container;

    // Add event listener for requestNavigate event to customize hyperlink navigation functionality
    public void OnRequestNavigate(RequestNavigateEventArgs args)
    {
        if (args.LinkType != HyperlinkType.Bookmark)
        {
            string link = args.NavigationLink;
            if (args.LocalReference.Length > 0)
            {
                link += '#' + args.LocalReference;
            }
            //Customize your code here.
            
            args.IsHandled = true;
        }
    }
}

If the selection is in hyperlink, trigger this event by calling NavigateHyperlinkAsync method of ‘Selection’ instance. Refer to the following example.

await container.DocumentEditor.Selection.NavigateHyperlinkAsync();

Blazor Document Editor copies link text of a hyperlink field to the clipboard if the selection is in hyperlink. Refer to the following example.

await container.DocumentEditor.Selection.CopyHyperlinkAsync();

To create a basic hyperlink in the document, press ENTER / SPACEBAR / SHIFT + ENTER / TAB key 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.


mail to:

Also Document Editor expose API InsertHyperlinkAsyncto insert hyperlink.

Refer to the following sample code.

await container.DocumentEditor.Editor.InsertHyperlinkAsync("https://www.google.com", "Google");

To remove link from hyperlink in the document, press Backspace key at the end of a hyperlink. By removing the link, it will be converted as plain text. You can use RemoveHyperlinkAsync method of ‘Editor’ instance if the selection is in hyperlink. Refer to the following example.

await container.DocumentEditor.Editor.RemoveHyperlinkAsync();

Blazor Document Editor provides dialog support to insert or edit a hyperlink.

Refer to the following example to open Hyperlink dialog.

container.DocumentEditor.OpenDialog(DialogType.Hyperlink);

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

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