HOME

Example of Insert Media in ASP.NET Core Rich Text Editor Control

This sample demonstrates the option to insert the media into the Rich Text Editor content. Click the audio and video button from the toolbar item to insert the media.

DEMO

SOURCE

<div>
 Rich Text Editor allows inserting video and audio from online sources and the local computers where you want to insert a video and audio into your content.
 Get started with Quick Toolbar to click on a video
 Using the quick toolbar, users can replace, align, display, dimension, and delete the selected video.
 <video controls>
 <source
 src="https://www.w3schools.com/tags/movie.mp4"
 type="video/mp4" />
 </video> 
 Get started with Quick Toolbar to click on an audio
 Using the quick toolbar, users can replace, display, and delete the selected audio.
 <audio controls><source src="https://assets.mixkit.co/sfx/preview/mixkit-rain-and-thunder-storm-2390.mp3" type="audio/mp3" /></audio>
 </div>

Video tools are used to insert a video into the Rich Text Editor and click on the video to customize the video using a quick toolbar. The quick toolbar has the following items:

Replace – can replace the video with some other video.
Align – Align the video with left, right, and justify.
Delete – delete the video.
LayoutOption - display the video as inline or with a break.
Resize – can resize the video dimension with resize options.

Audio tools are used to insert audio to the Rich Text Editor and click on the audio to customize the audio using a quick toolbar easily. The quick toolbar has the following items:

Replace – can replace the audio with some other audio.
Delete – delete the audio.
Display - display the audio as inline or with a break.

Note: For security reasons, the embed video URL is restricted in this demo. If you want to insert an embed URL video, set the EnableHtmlSanitizer to false in your application.