diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/drag-drop/audio/controller.cs b/ej2-asp-core-mvc/code-snippet/rich-text-editor/drag-drop/audio/controller.cs new file mode 100644 index 0000000000..19628e3ccd --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/drag-drop/audio/controller.cs @@ -0,0 +1,8 @@ +public class HomeController : Controller +{ + public ActionResult Index() + { + ViewBag.value = @"

The Syncfusion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.

Key features:

Sky with sun
"; + return View(); + } +} diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/drag-drop/audio/razor b/ej2-asp-core-mvc/code-snippet/rich-text-editor/drag-drop/audio/razor new file mode 100644 index 0000000000..b55749febf --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/drag-drop/audio/razor @@ -0,0 +1,4 @@ +@Html.EJS().RichTextEditor("drag-drop").InsertAudioSettings(obj => obj.SaveUrl("https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save")).Value(ViewBag.value).Render() + + + diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/drag-drop/audio/tagHelper b/ej2-asp-core-mvc/code-snippet/rich-text-editor/drag-drop/audio/tagHelper new file mode 100644 index 0000000000..6fc7c26145 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/drag-drop/audio/tagHelper @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/drag-drop/video/controller.cs b/ej2-asp-core-mvc/code-snippet/rich-text-editor/drag-drop/video/controller.cs new file mode 100644 index 0000000000..19628e3ccd --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/drag-drop/video/controller.cs @@ -0,0 +1,8 @@ +public class HomeController : Controller +{ + public ActionResult Index() + { + ViewBag.value = @"

The Syncfusion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.

Key features:

Sky with sun
"; + return View(); + } +} diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/drag-drop/video/razor b/ej2-asp-core-mvc/code-snippet/rich-text-editor/drag-drop/video/razor new file mode 100644 index 0000000000..79d978dbb6 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/drag-drop/video/razor @@ -0,0 +1,4 @@ +@Html.EJS().RichTextEditor("drag-drop").InsertVideoSettings(obj => obj.SaveUrl("https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save")).Value(ViewBag.value).Render() + + + diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/drag-drop/video/tagHelper b/ej2-asp-core-mvc/code-snippet/rich-text-editor/drag-drop/video/tagHelper new file mode 100644 index 0000000000..d6b7bafb1e --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/drag-drop/video/tagHelper @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/insert-image-media/audio.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/insert-image-media/audio.md index 7088669cd0..407eb318ad 100644 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/insert-image-media/audio.md +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/insert-image-media/audio.md @@ -242,6 +242,50 @@ Sets the default display property for audio when it is inserted in the Rich Text {% endtabs %} {% endif %} +## 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. + +In the following sample, you can see feature demo. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/drag-drop/audio/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/drag-drop/audio/controller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/drag-drop/audio/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/drag-drop/audio/controller.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + + +### Disabling Drag and Drop for Audios + +You can prevent drag-and-drop action by setting the actionBegin argument cancel value to true. The following code shows how to prevent the drag-and-drop. + + + ## Customizing the Audio Quick Toolbar The Rich Text Editor enables customization of the audio quick toolbar, allowing you to tailor its functionality with essential tools such as AudioReplace, Remove, and AudioLayoutOption. diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/insert-image-media/video.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/insert-image-media/video.md index 2294ef8cb9..2cb82adb77 100644 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/insert-image-media/video.md +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/insert-image-media/video.md @@ -258,6 +258,49 @@ Sets the default display property for the video when it is inserted in the Rich {% endtabs %} {% endif %} +## 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. + +In the following sample, you can see feature demo. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/drag-drop/video/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/drag-drop/video/controller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/drag-drop/video/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/drag-drop/video/controller.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + + +### Disabling Drag and Drop for Videos + +You can prevent drag-and-drop action by setting the actionBegin argument cancel value to true. The following code shows how to prevent the drag-and-drop. + + ## Video Resizing Tools diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/insert-image-media/audio.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/insert-image-media/audio.md index b24dcd89e5..06d70858fe 100644 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/insert-image-media/audio.md +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/insert-image-media/audio.md @@ -242,6 +242,50 @@ Sets the default display property for audio when it is inserted in the Rich Text {% endtabs %} {% endif %} +## 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. + +In the following sample, you can see feature demo. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/drag-drop/audio/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/drag-drop/audio/controller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/drag-drop/audio/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/drag-drop/audio/controller.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + + +### Disabling Drag and Drop for Audios + +You can prevent drag-and-drop action by setting the actionBegin argument cancel value to true. The following code shows how to prevent the drag-and-drop. + + + ## Customizing the Audio Quick Toolbar The Rich Text Editor enables customization of the audio quick toolbar, allowing you to tailor its functionality with essential tools such as AudioReplace, Remove, and AudioLayoutOption. diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/insert-image-media/video.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/insert-image-media/video.md index 7d8fe9010b..d25b04aaef 100644 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/insert-image-media/video.md +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/insert-image-media/video.md @@ -257,6 +257,50 @@ Sets the default display property for the video when it is inserted in the Rich {% endtabs %} {% endif %} +## 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. + +In the following sample, you can see feature demo. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/drag-drop/video/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/drag-drop/video/controller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/drag-drop/video/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/drag-drop/video/controller.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + + +### Disabling Drag and Drop for Videos + +You can prevent drag-and-drop action by setting the actionBegin argument cancel value to true. The following code shows how to prevent the drag-and-drop. + + + ## Video resizing 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.