Building a Custom Tool for Embedding YouTube Videos in the Editor Component

Environment

Description

How can I create a custom tool for embedding YouTube videos in the Kendo UI for Angular Editor component?

Solution

1. Modify the default schema of the Editor by following the ProseMirror Schema article. This step is required for the Editor to support the <iframe> tag.
2. Create a custom ToolBar tool that enables users to insert the YouTube video URL and select size options through a pop-up window.
3. Insert the newly created iframe string in the Editor value.

The following example demonstrates the suggested approach.