How to Insert Playable YouTube Video Link in Angular Rich Text Editor?

To enable playable YouTube video links in the Angular Rich Text Editor, you must embed the video properly and adjust the sanitization process to allow iframe elements. Below are the detailed steps to achieve this functionality.

1. Embed the YouTube Video:

Firstly, obtain the embed code for the YouTube video you want to include. YouTube provides an “Embed” option under the “Share” button that gives you a code snippet, typically containing an <iframe> tag. This code can be directly inserted into the Rich Text Editor.

2. Modify HTML Sanitization:

The Rich Text Editor sanitizes HTML to prevent potentially harmful code. To ensure your video remains playable, you’ll need to adjust this sanitization process to retain the iframe element. This requires using the beforeSanitizeHtml event to selectively bypass sanitization for YouTube iframes.

Rich Text Editor Implementation Steps

Here is a code snippet demonstrating how to implement this:

<ejs-richtexteditor
    id="insertMediaRTE"
    [toolbarSettings]="tools"
    (beforeSanitizeHtml)="beforeSanitizeHtml($event)">       
</ejs-richtexteditor>

TypeScript Configuration for Toolbar and Sanitization:

Toolbar Customization: The toolbar is customized to include functionalities such as bold, italic, underline, alignment options, list management, link creation, media insertion (image, audio, video), and basic editing commands like undo/redo.

Sanitization Adjustment: The beforeSanitizeHtml event handler selectively allows YouTube iframes by removing specific entries from the sanitization list, ensuring that videos can be embedded and played back.

public tools: object = {
    items: [
      'Bold', 'Italic', 'Underline', '|', 
      'Formats', 'Alignments', 'Blockquote', 'OrderedList', 'UnorderedList', '|', 
      'CreateLink', 'Image', 'Audio', 'Video', '|', 
      'SourceCode', 'Undo', 'Redo'
    ]
  };

  public beforeSanitizeHtml(args) {
    // Allow specific iframes for video embedding
    for (let i = 0; i < args.selectors.tags.length; i++) {
      if (args.selectors.tags[i] === 'iframe:not(.e-rte-embed-url)') {
        args.selectors.tags.splice(i, 1);
      }
    }
  }

Additional References

• Angular Rich Text Editor Documentation
• YouTube Embed Code

Conclusion
I hope you enjoyed learning how to insert playable youtube video link in Angular Rich Text Editor.

You can refer to our Angular Rich Text Editor feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications.

You can also explore our Angular Rich Text Editor Example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!