From 69be5c330e987889290fbd4de231de72870c3bfa Mon Sep 17 00:00:00 2001 From: Bhuvaneshwari-SF4208 Date: Tue, 12 Aug 2025 19:27:31 +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 | 44 +++++++++++++++---- .../insert-image-media/insert-images.md | 40 ++++++++++++++--- 6 files changed, 144 insertions(+), 14 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 d35d4fe5b7..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,9 +209,42 @@ 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. +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. Through the quick toolbar, change the width and height using `Change Size` option. Once you click, the Image Size dialog box will open as follows. In that you can specify the width and height of the image in pixel. @@ -235,7 +263,7 @@ By clicking the Image Caption, the image will get wrapped in an image element wi ## Configuring Image Display Position -Sets the default display for an image when it is inserted in the Rich Text Editor using [Display](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorImageSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorImageSettings_Display) field in [InsertImageSettings](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorBuilder.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorBuilder_InsertImageSettings_Syncfusion_EJ2_RichTextEditor_RichTextEditorImageSettings). It has two possible options: 'inline' and 'block'. +Sets the default display for an image when it is inserted in the Rich Text Editor using [Display](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorImageSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorImageSettings_Display) field in [InsertImageSettings](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorBuilder.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorBuilder_InsertImageSettings_Syncfusion_EJ2_RichTextEditor_RichTextEditorImageSettings_). It has two possible options: 'inline' and 'block'. {% 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..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. From 378cff3599a47f8ab2dddd5e312407521babeb13 Mon Sep 17 00:00:00 2001 From: Bhuvaneshwari-SF4208 <150326492+Bhuvaneshwari-SF4208@users.noreply.github.com> Date: Tue, 12 Aug 2025 19:29:48 +0530 Subject: [PATCH 2/2] Update insert-images.md --- .../EJ2_ASP.MVC/insert-image-media/insert-images.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) 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 bc5abcc9aa..f30bdfed80 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 @@ -244,7 +244,7 @@ The following sample demonstrates how to use the afterImageDelete event in Rich ## 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. +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. Through the quick toolbar, change the width and height using `Change Size` option. Once you click, the Image Size dialog box will open as follows. In that you can specify the width and height of the image in pixel. @@ -263,7 +263,7 @@ By clicking the Image Caption, the image will get wrapped in an image element wi ## Configuring Image Display Position -Sets the default display for an image when it is inserted in the Rich Text Editor using [Display](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorImageSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorImageSettings_Display) field in [InsertImageSettings](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorBuilder.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorBuilder_InsertImageSettings_Syncfusion_EJ2_RichTextEditor_RichTextEditorImageSettings_). It has two possible options: 'inline' and 'block'. +Sets the default display for an image when it is inserted in the Rich Text Editor using [Display](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorImageSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorImageSettings_Display) field in [InsertImageSettings](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorBuilder.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorBuilder_InsertImageSettings_Syncfusion_EJ2_RichTextEditor_RichTextEditorImageSettings). It has two possible options: 'inline' and 'block'. {% if page.publishingplatform == "aspnet-core" %} @@ -386,4 +386,4 @@ By configuring these options in the [QuickToolbarSettings](https://help.syncfusi ## See Also * [Image Quick toolbar](../toolbar/quick-toolbar#image-quick-toolbar) -* [Hyperlink Management](../link) \ No newline at end of file +* [Hyperlink Management](../link)