From 055a690f9d378b573b549e85c5eec45ed9c2855f Mon Sep 17 00:00:00 2001 From: Bhuvaneshwari-SF4208 Date: Tue, 12 Aug 2025 19:19:21 +0530 Subject: [PATCH 1/2] 965465: Update Image Deletion Behavior in Rich Text Editor Documentation --- .../remove-url -server/controller.cs | 10 +++++ .../remove-url -server/home-controller.cs | 13 +++++++ .../rich-text-editor/remove-url -server/razor | 24 ++++++++++++ .../remove-url -server/tagHelper | 27 +++++++++++++ .../insert-image-media/insert-images.md | 38 ++++++++++++++++--- .../insert-image-media/insert-images.md | 38 ++++++++++++++++--- 6 files changed, 140 insertions(+), 10 deletions(-) create mode 100644 ej2-asp-core-mvc/code-snippet/rich-text-editor/remove-url -server/controller.cs create mode 100644 ej2-asp-core-mvc/code-snippet/rich-text-editor/remove-url -server/home-controller.cs create mode 100644 ej2-asp-core-mvc/code-snippet/rich-text-editor/remove-url -server/razor create mode 100644 ej2-asp-core-mvc/code-snippet/rich-text-editor/remove-url -server/tagHelper 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..1a509e88e9 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,40 @@ 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: +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. -* `delete` key action. -* `backspace` key action. -* Removing uploaded image file from the insert image dialog. -* Deleting image using the quick toolbar `Remove` option. +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/remove-url/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/remove-url/controller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/remove-url/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/remove-url/controller.cs %} +{% endhighlight %} +{% 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" %} 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..20e17317d5 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,40 @@ 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: +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. -* `delete` key action. -* `backspace` key action. -* Removing uploaded image file from the insert image dialog. -* Deleting image using the quick toolbar `remove` option. +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/remove-url/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/remove-url/controller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/rich-text-editor/remove-url/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Controller.cs" %} +{% include code-snippet/rich-text-editor/remove-url/controller.cs %} +{% endhighlight %} +{% 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" %} From 196901c94ccdb90af9bfcd99b7a1a3e5b616cc91 Mon Sep 17 00:00:00 2001 From: Bhuvaneshwari-SF4208 Date: Tue, 12 Aug 2025 19:22:31 +0530 Subject: [PATCH 2/2] 965465: Update Image Deletion Behavior in Rich Text Editor Documentation --- .../controller.cs | 0 .../home-controller.cs | 0 .../{remove-url -server => remove-url-server}/razor | 0 .../{remove-url -server => remove-url-server}/tagHelper | 0 .../EJ2_ASP.MVC/insert-image-media/insert-images.md | 8 ++++---- .../EJ2_ASP.NETCORE/insert-image-media/insert-images.md | 8 ++++---- 6 files changed, 8 insertions(+), 8 deletions(-) rename ej2-asp-core-mvc/code-snippet/rich-text-editor/{remove-url -server => remove-url-server}/controller.cs (100%) rename ej2-asp-core-mvc/code-snippet/rich-text-editor/{remove-url -server => remove-url-server}/home-controller.cs (100%) rename ej2-asp-core-mvc/code-snippet/rich-text-editor/{remove-url -server => remove-url-server}/razor (100%) rename ej2-asp-core-mvc/code-snippet/rich-text-editor/{remove-url -server => remove-url-server}/tagHelper (100%) 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 similarity index 100% rename from ej2-asp-core-mvc/code-snippet/rich-text-editor/remove-url -server/controller.cs rename to ej2-asp-core-mvc/code-snippet/rich-text-editor/remove-url-server/controller.cs 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 similarity index 100% rename from ej2-asp-core-mvc/code-snippet/rich-text-editor/remove-url -server/home-controller.cs rename to ej2-asp-core-mvc/code-snippet/rich-text-editor/remove-url-server/home-controller.cs 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 similarity index 100% rename from ej2-asp-core-mvc/code-snippet/rich-text-editor/remove-url -server/razor rename to ej2-asp-core-mvc/code-snippet/rich-text-editor/remove-url-server/razor 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 similarity index 100% rename from ej2-asp-core-mvc/code-snippet/rich-text-editor/remove-url -server/tagHelper rename to ej2-asp-core-mvc/code-snippet/rich-text-editor/remove-url-server/tagHelper 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 1a509e88e9..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 @@ -223,10 +223,10 @@ The following sample demonstrates how to use the afterImageDelete event in Rich {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/rich-text-editor/remove-url/tagHelper %} +{% include code-snippet/rich-text-editor/remove-url-server/tagHelper %} {% endhighlight %} {% highlight c# tabtitle="Controller.cs" %} -{% include code-snippet/rich-text-editor/remove-url/controller.cs %} +{% include code-snippet/rich-text-editor/remove-url-server/controller.cs %} {% endhighlight %} {% endtabs %} @@ -234,10 +234,10 @@ The following sample demonstrates how to use the afterImageDelete event in Rich {% tabs %} {% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/rich-text-editor/remove-url/razor %} +{% include code-snippet/rich-text-editor/remove-url-server/razor %} {% endhighlight %} {% highlight c# tabtitle="Controller.cs" %} -{% include code-snippet/rich-text-editor/remove-url/controller.cs %} +{% include code-snippet/rich-text-editor/remove-url-server/controller.cs %} {% endhighlight %} {% endtabs %} {% endif %} 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 20e17317d5..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 @@ -222,10 +222,10 @@ The following sample demonstrates how to use the afterImageDelete event in Rich {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/rich-text-editor/remove-url/tagHelper %} +{% include code-snippet/rich-text-editor/remove-url-server/tagHelper %} {% endhighlight %} {% highlight c# tabtitle="Controller.cs" %} -{% include code-snippet/rich-text-editor/remove-url/controller.cs %} +{% include code-snippet/rich-text-editor/remove-url-server/controller.cs %} {% endhighlight %} {% endtabs %} @@ -233,10 +233,10 @@ The following sample demonstrates how to use the afterImageDelete event in Rich {% tabs %} {% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/rich-text-editor/remove-url/razor %} +{% include code-snippet/rich-text-editor/remove-url-server/razor %} {% endhighlight %} {% highlight c# tabtitle="Controller.cs" %} -{% include code-snippet/rich-text-editor/remove-url/controller.cs %} +{% include code-snippet/rich-text-editor/remove-url-server/controller.cs %} {% endhighlight %} {% endtabs %} {% endif %}