1. Home
  2. Forum
  3. Blazor
  4. Handle OnImageUpdate and Delete on QuickToolbar

Handle OnImageUpdate and Delete on QuickToolbar

How I can handle delete old image on ImageUpdate from QuickToolbar and why OnImageRemoving doesn't invoke when i delete image from QuickToolbar? How i can handle this?

<SfRichTextEditor ShowCharCount="true" MaxLength="8000" Placeholder="Enter text..." @bind-Value="@_createNewsDto.TextRU">
            <RichTextEditorToolbarSettings Items="@Tools"/>
            <RichTextEditorImageSettings AllowedTypes="@_allowedExtensions" SaveUrl="@_saveUrl" Path="./newsMedia/"/>
            <RichTextEditorEvents OnImageUploadSuccess="UploadImageSuccess" OnImageRemoving="DeleteImage"></RichTextEditorEvents>
        </SfRichTextEditor>

I have read that RichTextEditorEvents have OnImageDelete event but it doesn't work, I have error that  RichTextEditorEvents doesn't have property OnImageDelete


1 Reply
VY Vinothkumar Yuvaraj Syncfusion Team September 18, 2024 12:10 PM UTC

Hi Alexandr Cutar,


We have reviewed your query, and we would like to clarify the behavior of the OnImageRemoving and ImageDelete events. The OnImageRemoving event is triggered when the image is deleted from the image dialog before it has been inserted into the Rich Text Editor. On the other hand, the ImageDelete event is triggered when the image is deleted after it has been inserted into the editor, such as when using the QuickToolbar to delete the image.


Please refer to the following sample and code for your reference:

<SfRichTextEditor @ref="RteObj">

    <RichTextEditorImageSettingsSaveUrl="@SaveURL" Path="@Path"></RichTextEditorImageSettings>

    <RichTextEditorEventsImageDelete="OnImageDelete" OnImageRemoving="OnImageRemoving" />

</SfRichTextEditor>

 

@code {

    SfRichTextEditor RteObj;

    private string SaveURL = "https://blazor.syncfusion.com/services/production/api/RichTextEditor/SaveFile";

    private string Path = "https://blazor.syncfusion.com/services/production/RichTextEditor/";

    public void OnImageDelete(AfterImageDeleteEventArgs args)

    {

        // Here you can customize your code

    }

    public void OnImageRemoving(Syncfusion.Blazor.Inputs.RemovingEventArgs args)

    {

        // Here you can customize your code

    }

}

 


Video GIf:



You can use the ImageDelete event when deleting the image via the Quick Toolbar.


For more information, you can refer to the following API:

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorEvents.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorEvents_ImageDelete

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorEvents.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorEvents_OnImageRemoving


Regards,
Vinothkumar



Attachment: RichTextEditor_48d5662e_409d3f7b.zip

Loader.
Up arrow icon