Link Manipulation in Rich Text Editor
7 Oct 20254 minutes to read
The hyperlink can be inserted into the editor for quick access to the related information. The hyperlink itself can be text or an image.
Insert link
Point the cursor anywhere within the editor where you want to insert the link. It is also possible to select a text or an image within the editor that can be converted to the hyperlink. Click the insert hyperLink tool on the toolbar. The insert link dialog will open. The dialog has the following options.
| Options | Description |
|---|---|
| Web Address | Enter or paste the destination URL for the hyperlink |
| Display Text | Enter or edit the text that will be displayed for the hyperlink |
| Tooltip | Optional text that appears when hovering over the hyperlink, type the required text in the Tooltip field. |
| Open Link | Choose whether the hyperlink should open in a new browser tab or the same tab |
NOTE
The Rich Text Editor link tool validates the URLs as you type them in the web address. URLs considered invalid will be highlighted with a red color by clicking the insert button in the Insert Link dialog.
@using Syncfusion.Blazor.RichTextEditor
<SfRichTextEditor>
<RichTextEditorToolbarSettings Items="@Tools" />
<p>The Rich Text Editor component is the WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update content. Users can format their content using standard toolbar commands.</p>
<p><b> Key features:</b></p>
<ul>
<li><p> Provides <b>IFRAME</b> and <b>DIV</b> modes </p></li>
<li><p> Capable of handling markdown editing.</p></li>
<li><p> Contains a modular library to load the necessary functionality on demand.</p></li>
<li><p> Provides a fully customizable toolbar.</p></li>
<li><p> Provides HTML view to edit the source directly for developers.</p></li>
<li><p> Supports third - party library integration.</p></li>
</ul>
</SfRichTextEditor>
@code {
private List<ToolbarItemModel> Tools = new List<ToolbarItemModel>()
{
new ToolbarItemModel() { Command = ToolbarCommand.CreateLink },
new ToolbarItemModel() { Command = ToolbarCommand.RemoveLink }
};
}
Enable auto-linking
When you type URL and enter key to the Rich Text Editor, the typed URL will be automatically changed into the hyperlink.
Enable auto URL conversion
When the EnableAutoUrl property is enabled, it will accept the given URL (relative or absolute) without validating it for hyperlinks. Otherwise, the given URL will be automatically converted to absolute path URL by prefixing https:// for hyperlinks, and it defaults to false.
How to edit or remove a hyperlink
Add the custom tools on the selected link inside the Rich Text Editor through the quick toolbar.
@using Syncfusion.Blazor.RichTextEditor
<SfRichTextEditor>
<RichTextEditorQuickToolbarSettings Link="@Link" />
<p>The Rich Text Editor component is the WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update content. Users can format their content using standard toolbar commands.</p>
<p><b> Key features:</b></p>
<ul>
<li><p> Provides <b>IFRAME</b> and <b>DIV</b> modes </p></li>
<li><p> Capable of handling markdown editing.</p></li>
<li><p> Contains a modular library to load the necessary functionality on demand.</p></li>
<li><p> Provides a fully customizable toolbar.</p></li>
<li><p> Provides HTML view to edit the source directly for developers.</p></li>
<li><p> Supports third - party library integration.</p></li>
</ul>
</SfRichTextEditor>
@code {
private List<LinkToolbarItemModel> Link = new List<LinkToolbarItemModel>()
{
new LinkToolbarItemModel() { Command = LinkToolbarCommand.Open },
new LinkToolbarItemModel() { Command = LinkToolbarCommand.Edit },
new LinkToolbarItemModel() { Command = LinkToolbarCommand.UnLink }
};
}