HelpBot Assistant

How can I help you?

Integrate Embedly into the Angular Rich Text Editor

11 Feb 202610 minutes to read

  • Rich Text Editor easily integrate with Embed.ly which is probably the best service when it comes to embed the rich content such as Twitter, Facebook and lots of 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.
  • Processes links after editor view initialization via ngAfterViewInit.
  • Integrates with the editor’s actionComplete to detect and wrap links.
  • Minimal setup: include the platform script.

Setup / Installation

  • Include Embedly’s platform script in index.html so cards render on the page:
<script async src="//cdn.embedly.com/widgets/platform.js"></script>

Configure Embedly for the Rich Text Editor

Step 1: Configure imports and packages

  • Import the Rich Text Editor module and required services in your Angular module or standalone component (ToolbarService, LinkService, HtmlEditorService, etc.).
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

Below is the example integration of Embedly with the Angular Rich Text Editor.

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>  `;
}
<!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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></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