diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/remove-url-server/controller.cs b/ej2-asp-core-mvc/code-snippet/rich-text-editor/remove-url-server/controller.cs new file mode 100644 index 0000000000..ae14808aa4 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/remove-url-server/controller.cs @@ -0,0 +1,10 @@ +public class HomeController: Controller +{ + public ActionResult Index() + { + ViewBag.saveUrl = "[SERVICE_HOSTED_PATH]/api/RichTextEditor/SaveFile"; + ViewBag.removeUrl = "[SERVICE_HOSTED_PATH]/api/RichTextEditor/DeleteFile"; + ViewBag.path = "[SERVICE_HOSTED_PATH]/RichTextEditor/"; + return View(); + } +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/remove-url-server/home-controller.cs b/ej2-asp-core-mvc/code-snippet/rich-text-editor/remove-url-server/home-controller.cs new file mode 100644 index 0000000000..43d2f270c7 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/remove-url-server/home-controller.cs @@ -0,0 +1,13 @@ +public class HomeController : Controller +{ + public ActionResult Index() + { + ViewData["InsertImageSettings"] = new RichTextEditorImageSettings + { + SaveUrl = "[SERVICE_HOSTED_PATH]/api/RichTextEditor/SaveFile", + RemoveUrl = "[SERVICE_HOSTED_PATH]/api/RichTextEditor/DeleteFile", + Path = "[SERVICE_HOSTED_PATH]/RichTextEditor/" + }; + return View(); + } +} diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/remove-url-server/razor b/ej2-asp-core-mvc/code-snippet/rich-text-editor/remove-url-server/razor new file mode 100644 index 0000000000..5ccbd64cb2 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/remove-url-server/razor @@ -0,0 +1,24 @@ +@Html.EJS().RichTextEditor("editor").InsertImageSettings((Syncfusion.EJ2.RichTextEditor.RichTextEditorImageSettings)ViewData["InsertImageSettings"]).AfterImageDelete("afterImageDelete").Render() + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/remove-url-server/tagHelper b/ej2-asp-core-mvc/code-snippet/rich-text-editor/remove-url-server/tagHelper new file mode 100644 index 0000000000..be7b8afc57 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/remove-url-server/tagHelper @@ -0,0 +1,27 @@ + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/insert-image-media/insert-images.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/insert-image-media/insert-images.md index 25551fe889..bc5abcc9aa 100644 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/insert-image-media/insert-images.md +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/insert-image-media/insert-images.md @@ -184,12 +184,7 @@ Once you select the image from the local machine, the URL for the image will be ![Rich Text Editor Image delete](../images/image-del.png) -The following sample explains, how to configure `RemoveUrl` to remove a saved image from the remote service location, when the following image remove actions are performed: - -* `delete` key action. -* `backspace` key action. -* Removing uploaded image file from the insert image dialog. -* Deleting image using the quick toolbar `Remove` option. +The following sample explains, how to configure the `removeUrl` to remove a saved image from the remote service location, when the image is removed using the Insert Image dialog. {% if page.publishingplatform == "aspnet-core" %} @@ -214,6 +209,39 @@ The following sample explains, how to configure `RemoveUrl` to remove a saved im {% endtabs %} {% endif %} +## Deleting Images from Server Using Keyboard and Quick Toolbar Actions + +In the Rich Text Editor, deleting images using the `Delete` or `Backspace` keys, or the Quick Toolbar's `Remove` button, removes the image from the editor content not from the server. + +This behavior is intentional, allowing undo/redo operations to function properly without breaking references to previously uploaded images. + +To explicitly remove images from the server, use the `afterImageDelete` event. This event is triggered after an image is removed from the content and provides the src URL of the image, which can be used to initiate a request to your server for deleting the corresponding file. + +The following sample demonstrates how to use the afterImageDelete event in Rich Text Editor to delete images from the server after they are removed from the editor content: + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/remove-url-server/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/remove-url-server/controller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/remove-url-server/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/remove-url-server/controller.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + ## Adjusting Image Dimensions Sets the default width and height of the image when it is inserted in the Rich Text Editor using [Width](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorImageSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorImageSettings_Width) and [Height](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorImageSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorImageSettings_Height) of the [InsertImageSettings](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorBuilder.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorBuilder_InsertImageSettings_Syncfusion_EJ2_RichTextEditor_RichTextEditorImageSettings_) property. diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/insert-image-media/insert-images.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/insert-image-media/insert-images.md index c2eb1c2051..766dcab379 100644 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/insert-image-media/insert-images.md +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/insert-image-media/insert-images.md @@ -183,12 +183,7 @@ Once you select the image from the local machine, the URL for the image will be ![Rich Text Editor Image delete](../images/image-del.png) -The following sample explains, how to configure `removeUrl` to remove a saved image from the remote service location, when the following image remove actions are performed: - -* `delete` key action. -* `backspace` key action. -* Removing uploaded image file from the insert image dialog. -* Deleting image using the quick toolbar `remove` option. +The following sample explains, how to configure the `removeUrl` to remove a saved image from the remote service location, when the image is removed using the Insert Image dialog. {% if page.publishingplatform == "aspnet-core" %} @@ -213,6 +208,39 @@ The following sample explains, how to configure `removeUrl` to remove a saved im {% endtabs %} {% endif %} +## Deleting Images from Server Using Keyboard and Quick Toolbar Actions + +In the Rich Text Editor, deleting images using the `Delete` or `Backspace` keys, or the Quick Toolbar's `Remove` button, removes the image from the editor content not from the server. + +This behavior is intentional, allowing undo/redo operations to function properly without breaking references to previously uploaded images. + +To explicitly remove images from the server, use the `afterImageDelete` event. This event is triggered after an image is removed from the content and provides the src URL of the image, which can be used to initiate a request to your server for deleting the corresponding file. + +The following sample demonstrates how to use the afterImageDelete event in Rich Text Editor to delete images from the server after they are removed from the editor content: + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/remove-url-server/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/remove-url-server/controller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/remove-url-server/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/remove-url-server/controller.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + ## Adjusting Image Dimensions Sets the default width and height of the image when it is inserted in the Rich Text Editor using [width](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorImageSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorImageSettings_Width) and [height](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorImageSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorImageSettings_Height) of the [insertImageSettings](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorBuilder.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorBuilder_InsertImageSettings_Syncfusion_EJ2_RichTextEditor_RichTextEditorImageSettings) property.