From d7a0713d5e695e3acfb454438a2572a5e664f5d6 Mon Sep 17 00:00:00 2001 From: KokilaSF4836 Date: Mon, 20 Oct 2025 23:12:09 +0530 Subject: [PATCH] 968323: Added documentation for audio and video drag-and-drop. --- blazor/rich-text-editor/tools/audio.md | 27 ++++++++++++++++ .../code-snippet/audio-draganddrop.razor | 32 +++++++++++++++++++ .../code-snippet/video-draganddrop.razor | 32 +++++++++++++++++++ blazor/rich-text-editor/tools/video.md | 28 ++++++++++++++++ 4 files changed, 119 insertions(+) create mode 100644 blazor/rich-text-editor/tools/code-snippet/audio-draganddrop.razor create mode 100644 blazor/rich-text-editor/tools/code-snippet/video-draganddrop.razor diff --git a/blazor/rich-text-editor/tools/audio.md b/blazor/rich-text-editor/tools/audio.md index 132e6fbb1d..b7ec93e46b 100644 --- a/blazor/rich-text-editor/tools/audio.md +++ b/blazor/rich-text-editor/tools/audio.md @@ -193,6 +193,33 @@ N> The default `layoutOption` property is set to `Inline`. {% endhighlight %} {% endtabs %} +## Drag and drop audio insertion + +By default, the Rich Text Editor allows you to insert audios by drag-and-drop from the local file system such as Windows Explorer into the content editor area. And, you can upload the audios to the server before inserting into the editor by configuring the saveUrl property. + +{% tabs %} +{% highlight cshtml %} + +{% include_relative code-snippet/audio-draganddrop.razor %} + +{% endhighlight %} +{% endtabs %} + +### Disabling audio drag and drop + +You can prevent drag-and-drop action by setting the OnMediaDrop argument cancel value to true. The following code shows how to prevent the drag-and-drop. + +``` + +@code{ + private void OnMediaDrop(MediaDropEventArgs args) + { + if (args.MediaType == "Audio") { + args.Cancel = true; + } + } +} +``` ## Rename audio before inserting Using the [RichTextEditorAudioSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorAudioSettings.html) property, specify the server handler to upload the selected audio. Then, by binding the `FileUploadSuccess` event, you will receive the modified file name from the server and update it in the Rich Text Editor's insert audio dialog. diff --git a/blazor/rich-text-editor/tools/code-snippet/audio-draganddrop.razor b/blazor/rich-text-editor/tools/code-snippet/audio-draganddrop.razor new file mode 100644 index 0000000000..91ea19446d --- /dev/null +++ b/blazor/rich-text-editor/tools/code-snippet/audio-draganddrop.razor @@ -0,0 +1,32 @@ +@using Syncfusion.Blazor.RichTextEditor; + + + + +

+ The Rich Text Editor control is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content. + Users can format their content using standard toolbar commands. +

+

Key features:

+
    +

  • Provides < IFRAME > and < DIV > modes

    • +

  • Capable of handling markdown editing.

    • +

  • Contains a modular library to load the necessary functionality on demand.

    • +

  • Provides a fully customizable toolbar.

    • +

  • Provides HTML view to edit the source directly for developers.

    • +

  • Supports third - party library integration.

    • +

  • Allows preview of modified content before saving it.

    • +

  • Handles images, hyperlinks, video, hyperlinks, uploads, etc.

    • +

  • Contains undo / redo manager.

    • +

  • Creates bulleted and numbered lists.

    • +
+ +@code { + private string SaveURL = "https://blazor.syncfusion.com/services/production/api/RichTextEditor/SaveFile"; + private string Path = "https://blazor.syncfusion.com/services/production/RichTextEditor/"; + private List Items = new List() + { + new ToolbarItemModel() { Command = ToolbarCommand.Audio } + }; +} + diff --git a/blazor/rich-text-editor/tools/code-snippet/video-draganddrop.razor b/blazor/rich-text-editor/tools/code-snippet/video-draganddrop.razor new file mode 100644 index 0000000000..9c8e911286 --- /dev/null +++ b/blazor/rich-text-editor/tools/code-snippet/video-draganddrop.razor @@ -0,0 +1,32 @@ +@using Syncfusion.Blazor.RichTextEditor; + + + + +

+ The Rich Text Editor control is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content. + Users can format their content using standard toolbar commands. +

+

Key features:

+
    +

  • Provides < IFRAME > and < DIV > modes

    • +

  • Capable of handling markdown editing.

    • +

  • Contains a modular library to load the necessary functionality on demand.

    • +

  • Provides a fully customizable toolbar.

    • +

  • Provides HTML view to edit the source directly for developers.

    • +

  • Supports third - party library integration.

    • +

  • Allows preview of modified content before saving it.

    • +

  • Handles images, hyperlinks, video, hyperlinks, uploads, etc.

    • +

  • Contains undo / redo manager.

    • +

  • Creates bulleted and numbered lists.

    • +
+ +@code { + private string SaveURL = "https://blazor.syncfusion.com/services/production/api/RichTextEditor/SaveFile"; + private string Path = "https://blazor.syncfusion.com/services/production/RichTextEditor/"; + private List Items = new List() + { + new ToolbarItemModel() { Command = ToolbarCommand.Video } + }; +} + diff --git a/blazor/rich-text-editor/tools/video.md b/blazor/rich-text-editor/tools/video.md index 79fbda9ef7..eae8284f33 100644 --- a/blazor/rich-text-editor/tools/video.md +++ b/blazor/rich-text-editor/tools/video.md @@ -215,6 +215,34 @@ N> The default `layoutOption` property is set to `Inline`. {% endhighlight %} {% endtabs %} +## Drag and drop video insertion + +By default, the Rich Text Editor allows you to insert videos by drag-and-drop from the local file system such as Windows Explorer into the content editor area. And, you can upload the videos to the server before inserting into the editor by configuring the saveUrl property. + +{% tabs %} +{% highlight cshtml %} + +{% include_relative code-snippet/video-draganddrop.razor %} + +{% endhighlight %} +{% endtabs %} + +### Disabling videos drag and drop + +You can prevent drag-and-drop action by setting the OnMediaDrop argument cancel value to true. The following code shows how to prevent the drag-and-drop. + +``` + +@code{ + private void OnMediaDrop(MediaDropEventArgs args) + { + if (args.MediaType == "Video") { + args.Cancel = true; + } + } +} +``` + ## Resize video The Rich Text Editor has built-in video resizing support, which is enabled for the video elements added. The resize points will appear on each corner of the video when focusing so users can easily resize the video using mouse points or thumb through the resize points. Also, the resize calculation will be done based on the aspect ratio.