diff --git a/blazor/rich-text-editor/tools/audio.md b/blazor/rich-text-editor/tools/audio.md index 132e6fbb1d..2381f5f441 100644 --- a/blazor/rich-text-editor/tools/audio.md +++ b/blazor/rich-text-editor/tools/audio.md @@ -193,6 +193,35 @@ N> The default `layoutOption` property is set to `Inline`. {% endhighlight %} {% endtabs %} +## Drag and drop audio insertion + +Default upload: Insert audio directly from your local file system (e.g., File Explorer, Finder) into the editor. + +Server upload: Use the `SaveUrl` property to upload audio files to your server before inserting them into the editor. + +{% tabs %} +{% highlight cshtml %} + +{% include_relative code-snippet/audio-drag-and-drop.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-drag-and-drop.razor b/blazor/rich-text-editor/tools/code-snippet/audio-drag-and-drop.razor new file mode 100644 index 0000000000..f44585eeab --- /dev/null +++ b/blazor/rich-text-editor/tools/code-snippet/audio-drag-and-drop.razor @@ -0,0 +1,27 @@ +@using Syncfusion.Blazor.RichTextEditor; + + + + +

+ The Rich Text Editor supports seamless audio insertion through drag-and-drop functionality. Users can quickly insert audio files into their content with a simple drag-and-drop action. +

+

Key features:

+ +
+@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-drag-and-drop.razor b/blazor/rich-text-editor/tools/code-snippet/video-drag-and-drop.razor new file mode 100644 index 0000000000..7935295520 --- /dev/null +++ b/blazor/rich-text-editor/tools/code-snippet/video-drag-and-drop.razor @@ -0,0 +1,27 @@ +@using Syncfusion.Blazor.RichTextEditor; + + + + +

+ The Rich Text Editor supports seamless video insertion through drag-and-drop functionality. Users can quickly insert video files into their content with a simple drag-and-drop action. +

+

Key features:

+
    +
  • Supports local upload: Drag video files from your local system (e.g., File Explorer, Finder) and drop them + directly into the editor.
  • +
  • Supports server upload: Configure the SaveUrl property to upload video files to your server + before inserting them into the editor.
  • +
  • Supports common video formats such as MP4, WMV, AVI and MOV
  • +
  • Fully customizable upload settings, including size limits and validation.
  • +
+
+@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..f0cfdde5ba 100644 --- a/blazor/rich-text-editor/tools/video.md +++ b/blazor/rich-text-editor/tools/video.md @@ -215,6 +215,36 @@ N> The default `layoutOption` property is set to `Inline`. {% endhighlight %} {% endtabs %} +## Drag and drop video insertion + +Default upload: Insert video directly from your local file system (e.g., File Explorer, Finder) into the editor. + +Server upload: Use the `SaveUrl` property to upload video files to your server before inserting them into the editor. + +{% tabs %} +{% highlight cshtml %} + +{% include_relative code-snippet/video-drag-and-drop.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.