Skip to content

968323: Added documentation for audio and video drag-and-drop. #6977

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: development
Choose a base branch
from
Open

968323: Added documentation for audio and video drag-and-drop. #6977

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 27 additions & 0 deletions blazor/rich-text-editor/tools/audio.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.

```
<RichTextEditorEvents OnMediaDrop="@OnMediaDrop"></RichTextEditorEvents>
@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.
Expand Down
32 changes: 32 additions & 0 deletions blazor/rich-text-editor/tools/code-snippet/audio-draganddrop.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
@using Syncfusion.Blazor.RichTextEditor;

<SfRichTextEditor>
<RichTextEditorToolbarSettings Items="@Items" />
<RichTextEditorAudioSettings SaveUrl="@SaveURL" Path="@Path"></RichTextEditorAudioSettings>
<p>
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.
</p>
<p><b> Key features:</b></p>
<ul>
<li><p> Provides &lt; IFRAME &gt; and &lt; DIV &gt; modes </p></li>
<li><p> Capable of handling markdown editing.</p></li>
<li><p> Contains a modular library to load the necessary functionality on demand.</p></li>
<li><p> Provides a fully customizable toolbar.</p></li>
<li><p> Provides HTML view to edit the source directly for developers.</p></li>
<li><p> Supports third - party library integration.</p></li>
<li><p> Allows preview of modified content before saving it.</p></li>
<li><p> Handles images, hyperlinks, video, hyperlinks, uploads, etc.</p></li>
<li><p> Contains undo / redo manager.</p></li>
<li><p> Creates bulleted and numbered lists.</p></li>
</ul>
</SfRichTextEditor>
@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<ToolbarItemModel> Items = new List<ToolbarItemModel>()
{
new ToolbarItemModel() { Command = ToolbarCommand.Audio }
};
}

32 changes: 32 additions & 0 deletions blazor/rich-text-editor/tools/code-snippet/video-draganddrop.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
@using Syncfusion.Blazor.RichTextEditor;

<SfRichTextEditor>
<RichTextEditorToolbarSettings Items="@Items" />
<RichTextEditorVideoSettings SaveUrl="@SaveURL" Path="@Path"></RichTextEditorVideoSettings>
<p>
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.
</p>
<p><b> Key features:</b></p>
<ul>
<li><p> Provides &lt; IFRAME &gt; and &lt; DIV &gt; modes </p></li>
<li><p> Capable of handling markdown editing.</p></li>
<li><p> Contains a modular library to load the necessary functionality on demand.</p></li>
<li><p> Provides a fully customizable toolbar.</p></li>
<li><p> Provides HTML view to edit the source directly for developers.</p></li>
<li><p> Supports third - party library integration.</p></li>
<li><p> Allows preview of modified content before saving it.</p></li>
<li><p> Handles images, hyperlinks, video, hyperlinks, uploads, etc.</p></li>
<li><p> Contains undo / redo manager.</p></li>
<li><p> Creates bulleted and numbered lists.</p></li>
</ul>
</SfRichTextEditor>
@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<ToolbarItemModel> Items = new List<ToolbarItemModel>()
{
new ToolbarItemModel() { Command = ToolbarCommand.Video }
};
}

28 changes: 28 additions & 0 deletions blazor/rich-text-editor/tools/video.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.

```
<RichTextEditorEvents OnMediaDrop="@OnMediaDrop"></RichTextEditorEvents>
@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.
Expand Down