Links in Angular Rich Text Editor

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. Place the cursor where you want to insert the link, or select the text or image to convert into a hyperlink.
  2. Click the “Insert Link” tool in the toolbar to open the Insert Link dialog.
  3. Configure the dialog options as described below.

To use the image and link tools, configure ImageService and LinkService in the provider section.

Options Description
Web Address Enter or paste the destination URL for your link (e.g., https://google.com).
Display Text Enter or edit the text you want to display for the link.
Tooltip To display additional helpful information when you hover over the hyperlink, type the required text in the Tooltip field.
Open Link in New Window Specify whether the link opens in a new window (target="_blank") or not.

The following example demonstrates inserting a hyperlink:

import { Component } from '@angular/core';
import { RichTextEditorModule, ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService, TableService, PasteCleanupService } from '@syncfusion/ej2-angular-richtexteditor';
@Component({
    imports: [
        RichTextEditorModule
    ],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-richtexteditor id='editor' [toolbarSettings]='tools'></ejs-richtexteditor>`,
    providers: [ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService, TableService, PasteCleanupService]
})
export class AppComponent {
    public tools = {
        items: ['Image', 'CreateLink']
    };
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

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 edit or remove a hyperlink:

  1. Select the linked text or image.
  2. To edit, click the EditLink tool to reopen the Insert Link dialog and modify the settings.
  3. To remove, click the RemoveLink tool in the toolbar, which deletes the hyperlink while preserving the text or image.

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.

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.

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

The following example demonstrates disabling auto-link protocol prefixing:

import { Component } from '@angular/core';
import { RichTextEditorModule, ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService, TableService, PasteCleanupService, QuickToolbarSettingsModel } from '@syncfusion/ej2-angular-richtexteditor';

@Component({
  imports: [
    RichTextEditorModule
  ],
  standalone: true,
  selector: 'app-root',
  template: `<ejs-richtexteditor id='editor' [toolbarSettings]='tools' [enableAutoUrl]='true'></ejs-richtexteditor>`,
  providers: [ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService, TableService, PasteCleanupService]
})

export class AppComponent {
  public tools = {
    items: ['Image', 'CreateLink']
  };
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

See also