Link in ASP.NET CORE Rich Text Editor Control

21 Mar 20256 minutes to read

A hyperlink can be insert into the editor for quick access to the related information. The hyperlink itself can be a text or an image.

To insert a hyperlink:

  1. Position your cursor where you want to insert the link, or select the text or image you wish to convert into a hyperlink.
  2. Click the “Insert HyperLink” tool on the toolbar.
  3. In the Insert Link Dialog that appears, fill in the following options.
Options Description
Web Address Enter or paste the destination URL for your link
Display Text Enter or edit the required text that you want to display text for the link
Tooltip To display additional helpful information when you place the pointer on the hyperlink, type the required text in the “Tooltip” field.
Open Link in New Window Specify whether, the given link will be open in new window or not 
<ejs-richtexteditor id="link" value="@ViewBag.value">
    <e-richtexteditor-toolbarsettings items="@ViewBag.items"></e-richtexteditor-toolbarsettings>
</ejs-richtexteditor>
public class HomeController : Controller
{

    public ActionResult Index()
    {
        ViewBag.value = @"<p>The Syncfudion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><p><b>Key features:</b></p><ul><li><p>Provides &lt;IFRAME&gt; and &lt;DIV&gt; modes.</p></li><li><p>Bulleted and numbered lists.</p></li><li><p>Handles images, hyperlinks, videos, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager. </p></li></ul><div style='display: inline-block; width: 60%; vertical-align: top; cursor: auto;'><img alt='Sky with sun' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png' width='309' style='min-width: 10px; min-height: 10px; width: 309px; height: 174px;' class='e-rte-image e-imginline e-rte-drag-image' height='174' /></div>";
        ViewBag.items = new[] { "CreateLink" };
        return View();
    }
}

NOTE

The Rich Text Editor validates URLs as you type in the Web Address field. Invalid URLs will be highlighted in red when you click the insert button in the Insert Link dialog.

To remove a hyperlink:

  1. Select the linked text or image.
  2. Click the “Remove Hyperlink” tool in the toolbar.

This action will remove the hyperlink while keeping the original text or image intact.

The Rich Text Editor supports automatic link generation. When you type a URL and press Space or Enter, the editor automatically converts the typed URL into a clickable hyperlink.

The Rich Text Editor allows you to customize the tools in the link quick toolbar. You can add or remove items by using the quickToolbarSettings property.

The quick toolbar for the Link has the following options.

Tools Description
Open Opens the linked page in a new window.
Edit Link Allows you to edit the selected link.
Remove Link Removes the link from the selected content.
Custom Tool Adds custom options to the quick toolbar.

The following example demonstrates how to customize the link quick toolbar using the quickToolbarSettings property.

<ejs-richtexteditor id="link" value="@ViewBag.value">
    <e-richtexteditor-quicktoolbarsettings link="@ViewBag.link"></e-richtexteditor-quicktoolbarsettings>
    <e-richtexteditor-toolbarsettings items="@ViewBag.items"></e-richtexteditor-toolbarsettings>
</ejs-richtexteditor>
public class HomeController : Controller
{

    public ActionResult Index()
    {
        ViewBag.value = @"<p>The Syncfudion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><p><b>Key features:</b></p><ul><li><p>Provides &lt;IFRAME&gt; and &lt;DIV&gt; modes.</p></li><li><p>Bulleted and numbered lists.</p></li><li><p>Handles images, hyperlinks, videos, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager. </p></li></ul><div style='display: inline-block; width: 60%; vertical-align: top; cursor: auto;'><img alt='Sky with sun' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png' width='309' style='min-width: 10px; min-height: 10px; width: 309px; height: 174px;' class='e-rte-image e-imginline e-rte-drag-image' height='174' /></div>";
        ViewBag.items = new[] { "CreateLink" };
         ViewBag.link = new[] { "Open", "Edit", "UnLink", "FontColor"};
        return View();
    }
}

By default, the URL entered in the Web Address field is automatically converted into an absolute URL by prefixing it with https:// for hyperlinks. This ensures that the URL is properly formatted and accessible when used as a hyperlink.

However, if you want to accept the given URL without validating it for hyperlinks and without automatically adding a protocol (such as https://) or domain, you need to set the EnableAutoUrl property to true. By default, this property is set to false, meaning that automatic URL conversion is enabled unless explicitly disabled.

<ejs-richtexteditor id="link" value="@ViewBag.value" EnableAutoUrl="true">
    <e-richtexteditor-quicktoolbarsettings link="@ViewBag.link"></e-richtexteditor-quicktoolbarsettings>
    <e-richtexteditor-toolbarsettings items="@ViewBag.items"></e-richtexteditor-toolbarsettings>
</ejs-richtexteditor>
public class HomeController : Controller
{

    public ActionResult Index()
    {
        ViewBag.value = @"<p>The Syncfudion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><p><b>Key features:</b></p><ul><li><p>Provides &lt;IFRAME&gt; and &lt;DIV&gt; modes.</p></li><li><p>Bulleted and numbered lists.</p></li><li><p>Handles images, hyperlinks, videos, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager. </p></li></ul><div style='display: inline-block; width: 60%; vertical-align: top; cursor: auto;'><img alt='Sky with sun' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png' width='309' style='min-width: 10px; min-height: 10px; width: 309px; height: 174px;' class='e-rte-image e-imginline e-rte-drag-image' height='174' /></div>";
        ViewBag.items = new[] { "CreateLink" };
         ViewBag.link = new[] { "Open", "Edit", "UnLink", "FontColor"};
        return View();
    }
}

See Also