965465: Update Image Deletion Behavior in Rich Text Editor Documentation

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();
+    }
+}

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();
+    }
+}

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()
+
+<script type="text/javascript">
+    function afterImageDelete(args) {
+        if (args && args.src) {
+            const src = args.src;
+            const fileName = src.split('/').pop();
+            const dummyFile = new File([''], fileName);
+            const formData = new FormData();
+            formData.append('UploadFiles', dummyFile);
+            fetch(this.insertImageSettings.removeUrl, {
+                method: 'POST',
+                body: formData,
+            })
+                .then((response) => {
+                    if (!response.ok) throw new Error('Server responded with an error');
+                    console.log('Image deleted successfully:', fileName);
+                })
+                .catch((error) => {
+                    console.error('Image deletion failed:', error);
+                });
+        }
+    }
+</script>

ej2-asp-core-mvc/code-snippet/rich-text-editor/remove-url-server/tagHelper

@@ -0,0 +1,27 @@
+<ejs-richtexteditor id="rteImage" afterImageDelete="afterImageDelete">
+    <e-richtexteditor-insertimagesettings saveUrl="@ViewBag.saveUrl" removeUrl="@ViewBag.removeUrl" path="@ViewBag.path" />
+</ejs-richtexteditor>
+
+<script type="text/javascript">
+    function afterImageDelete(args)
+    {
+    if (args && args.src) {
+        const src = args.src;
+        const fileName = src.split('/').pop();
+        const dummyFile = new File([''], fileName);
+        const formData = new FormData();
+        formData.append('UploadFiles', dummyFile);
+        fetch(this.insertImageSettings.removeUrl, {
+        method: 'POST',
+        body: formData,
+        })
+        .then((response) => {
+            if (!response.ok) throw new Error('Server responded with an error');
+            console.log('Image deleted successfully:', fileName);
+        })
+        .catch((error) => {
+            console.error('Image deletion failed:', error);
+        });
+        }
+    }
+</script>

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.

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.