Integrate Embedly into the Angular Rich Text Editor

• The Rich Text Editor easily integrates with Embed.ly, a service that lets you embed rich content such as Twitter, Facebook, and many other publishing platform embeds. This integration allows users to insert links that render as interactive embed cards, enhancing the visual presentation and user experience when sharing web content.

• This can be achieved by binding the actionComplete event to the toolbar items in the toolbarSettings property. In the event handler, create an element and add the appropriate class.

Prerequisites

Before proceeding, complete the base Rich Text Editor setup described in the Getting Started guide. The guide covers Angular CLI setup, package installation, CSS imports, module injection, and basic editor markup: Getting Started with Angular Rich Text Editor.

Key features

• Automatic conversion of inserted links into rich Embedly cards.
• Process links after the editor view initializes via ngAfterViewInit.
• Integrate with the editor’s actionComplete event to detect and wrap inserted links.
• Minimal setup: include the Embedly platform script.

Setup

• Include Embedly’s platform script in src/index.html so cards render on the page:

<script async src="https://cdn.embedly.com/widgets/platform.js"></script>

Configure Embedly for the Rich Text Editor

Step 1: Configure imports

• Import the Rich Text Editor module and the required services (ToolbarService, LinkService, HtmlEditorService, etc.) in your Angular standalone component.

import { RichTextEditorAllModule } from '@syncfusion/ej2-angular-richtexteditor'
import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { ToolbarService, LinkService, ImageService, HtmlEditorService, RichTextEditorComponent  } from '@syncfusion/ej2-angular-richtexteditor';

Step 2: Configure actionComplete event

• Listen to the editor’s actionComplete, detect link insertion, wrap the link element in a blockquote with class embedly-card and insert it into the editor content. After insertion the platform script renders the card.

public actionComplete(args: any): void {
    if (args.requestType === 'Links') {
        const rteContent = document.querySelector('.e-rte-content');
        if (!rteContent) {
            return;
        }
        const links = rteContent.querySelectorAll('a');
        links.forEach(link => {
            if (!link.closest('.embedly-card')) {
                const blockquote = document.createElement('blockquote');
                blockquote.className = 'embedly-card';
                const anchor = document.createElement('a');
                anchor.href = link.href;
                anchor.textContent = link.textContent || link.href;
                blockquote.appendChild(anchor);
                blockquote.appendChild(document.createElement('p'));
                link.parentNode?.replaceChild(blockquote, link);
            }
        });
        if (window.embedly && window.embedly.lib) {
            window.embedly.lib.process(rteContent);
        }
    }
}

Step 3: Run Embedly after view initialization

Implement Angular’s AfterViewInit and its ngAfterViewInit() method to call window.embedly.lib.process(...) once the editor’s view has rendered. This ensures Embedly processes newly inserted links and reliably renders cards.

public ngAfterViewInit(): void {
    if (window.embedly && window.embedly.lib) {
        window.embedly.lib.process(document.body);
    }
}

Example for Embedly integration

The following sample demonstrates the Embedly integration with the Angular Rich Text Editor.

app.ts

import { RichTextEditorAllModule } from '@syncfusion/ej2-angular-richtexteditor'
import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { ToolbarService, LinkService, ImageService, HtmlEditorService, RichTextEditorComponent  } from '@syncfusion/ej2-angular-richtexteditor';

declare global {
    interface Window {
        embedly?: any;
    }
}

@Component({
  imports: [
    RichTextEditorAllModule
  ],
  standalone: true,
    selector: 'app-root',
    template: `<ejs-richtexteditor #sample [toolbarSettings]='toolbarSettings' [value]="value"  (actionComplete)='actionComplete($event)'></ejs-richtexteditor>`,
    providers: [ToolbarService, LinkService, ImageService, HtmlEditorService ]
})

export class App implements AfterViewInit {
    @ViewChild('sample') public rteObj?: RichTextEditorComponent;
    public toolbarSettings: Object = {
        items: ['createLink']
    };
    public actionComplete(args: any): void {
        if (<String>args.requestType === 'Links') {
            const rteContent = document.querySelector('.e-rte-content');
            if (!rteContent) {
                return;
            }
            const links = rteContent.querySelectorAll('a');
            links.forEach(link => {
                if (!link.closest('.embedly-card')) {
                    const blockquote = document.createElement('blockquote');
                    blockquote.className = 'embedly-card';
                    const anchor = document.createElement('a');
                    anchor.href = link.href;
                    anchor.textContent = link.textContent || link.href;
                    blockquote.appendChild(anchor);
                    blockquote.appendChild(document.createElement('p'));
                    link.parentNode?.replaceChild(blockquote, link);
                }
            });
            if (window.embedly && window.embedly.lib) {
                window.embedly.lib.process(rteContent);
            }
        }
    }

    // Run embedly processing once component view has been initialized
    public ngAfterViewInit(): void {
        if (window.embedly && window.embedly.lib) {
            window.embedly.lib.process(document.body);
        }
    }

    public value:string = `<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>  `;
}

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>MyApp</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <script src="https://cdn.embedly.com/widgets/platform.js" charset="UTF-8"></script>
</head>
<body style="margin-top: 100px;">
  <app-root></app-root>
</body>
</html>

Additional Resources

• GitHub Repository: Angular Rich Text Editor integrations samples
• Embedly — Official site and docs: https://embedly.com
• Embedly widgets/platform script docs: https://embedly.com/docs/widgets/
• Syncfusion Rich Text Editor API: https://ej2.syncfusion.com/angular/documentation/api/rich-text-editor/
• Syncfusion demos — Rich Text Editor samples: https://ej2.syncfusion.com/angular/demos/#/material/rich-text-editor/overview