Events in Blazor RichTextEditor Component
13 Dec 20216 minutes to read
This section explains the list of events of the RichTextEditor component which will be triggered for an appropriate RichTextEditor actions.
OnActionBegin
OnActionBegin
event triggers before command execution using the toolbar items.
@using Syncfusion.Blazor.RichTextEditor
<SfRichTextEditor>
<RichTextEditorEvents OnActionBegin="@OnActionBeginHandler" ></RichTextEditorEvents>
</SfRichTextEditor>
@code{
public void OnActionBeginHandler(ActionBeginEventArgs args)
{
// Here you can customize your code
}
}
OnActionComplete
OnActionComplete
event triggers after command execution using the toolbar items.
@using Syncfusion.Blazor.RichTextEditor
<SfRichTextEditor>
<RichTextEditorEvents OnActionComplete="@OnActionCompleteHandler"><RichTextEditorEvents>
</SfRichTextEditor>
@code{
public void OnActionCompleteHandler(ActionCompleteEventArgs args)
{
// Here you can customize your code
}
}
OnDialogOpen
OnDialogOpen
event triggers when the dialog is being opened.
@using Syncfusion.Blazor.RichTextEditor
<SfRichTextEditor>
<RichTextEditorEvents OnDialogOpen="@OnDialogOpenHandler"><RichTextEditorEvents>
</SfRichTextEditor>
@code{
public void OnDialogOpenHandler(BeforeOpenEventArgs args)
{
// Here you can customize your code
}
}
DialogOpened
DialogOpened
event triggers when a dialog is opened.
@using Syncfusion.Blazor.RichTextEditor
<SfRichTextEditor>
<RichTextEditorEvents DialogOpened="@DialogOpenedHandler"><RichTextEditorEvents>
</SfRichTextEditor>
@code{
public void DialogOpenedHandler(DialogOpenEventArgs args)
{
// Here you can customize your code
}
}
OnDialogClose
OnDialogClose
event triggers when the dialog is being closed.
@using Syncfusion.Blazor.RichTextEditor
<SfRichTextEditor>
<RichTextEditorEvents OnDialogClose="@OnDialogCloseHandler"><RichTextEditorEvents>
</SfRichTextEditor>
@code{
public void OnDialogCloseHandler(BeforeCloseEventArgs args)
{
// Here you can customize your code
}
}
DialogClosed
DialogClosed
event triggers after the dialog has been closed.
@using Syncfusion.Blazor.RichTextEditor
<SfRichTextEditor>
<RichTextEditorEvents DialogClosed="@DialogClosedHandler"><RichTextEditorEvents>
</SfRichTextEditor>
@code{
public void DialogClosedHandler(DialogCloseEventArgs args)
{
// Here you can customize your code
}
}
OnQuickToolbarOpen
OnQuickToolbarOpen
event triggers when the quick toolbar is being opened.
@using Syncfusion.Blazor.RichTextEditor
<SfRichTextEditor>
<RichTextEditorEvents OnQuickToolbarOpen="@OnQuickToolbarOpenHandler">
<RichTextEditorEvents>
</SfRichTextEditor>
@code{
public void OnQuickToolbarOpenHandler(BeforeQuickToolbarOpenArgs args)
{
// Here you can customize your code
}
}
QuickToolbarOpened
QuickToolbarOpened
event triggers when a quick toolbar is opened.
@using Syncfusion.Blazor.RichTextEditor
<SfRichTextEditor>
<RichTextEditorEvents QuickToolbarOpened="@QuickToolbarOpenedHandler">
<RichTextEditorEvents>
</SfRichTextEditor>
@code{
public void QuickToolbarOpenedHandler(QuickToolbarEventArgs args)
{
// Here you can customize your code
}
}
QuickToolbarClosed
QuickToolbarClosed
event triggers after the quick toolbar has been closed.
@using Syncfusion.Blazor.RichTextEditor
<SfRichTextEditor>
<RichTextEditorEvents QuickToolbarClosed="@QuickToolbarClosedHandler">
<RichTextEditorEvents>
</SfRichTextEditor>
@code{
public void QuickToolbarClosedHandler(QuickToolbarEventArgs args)
{
// Here you can customize your code
}
}
OnImageSelected
OnImageSelected
event triggers when the image is selected or dragged into the insert image dialog.
@using Syncfusion.Blazor.RichTextEditor
<SfRichTextEditor>
<RichTextEditorEvents OnImageSelected="@OnImageSelectedHandler">
<RichTextEditorEvents>
</SfRichTextEditor>
@code{
public void OnImageSelectedHandler(SelectedEventArgs args)
{
// Here you can customize your code
}
}
BeforeUploadImage
BeforeUploadImage
event triggers before the image upload process.
@using Syncfusion.Blazor.RichTextEditor
<SfRichTextEditor>
<RichTextEditorEvents BeforeUploadImage ="@BeforeUploadImageHandler">
<RichTextEditorEvents>
</SfRichTextEditor>
@code{
public void BeforeUploadImageHandler(ImageUploadingEventArgs args)
{
// Here you can customize your code
}
}
OnImageUploadSuccess
OnImageUploadSuccess
event triggers when the image is successfully uploaded to the server side.
@using Syncfusion.Blazor.RichTextEditor
<SfRichTextEditor>
<RichTextEditorEvents OnImageUploadSuccess="@OnImageUploadSuccessHandler">
<RichTextEditorEvents>
</SfRichTextEditor>
@code{
public void OnImageUploadSuccessHandler(ImageSuccessEventArgs args)
{
// Here you can customize your code
}
}
OnImageUploadFailed
OnImageUploadFailed
event triggers when there is an error in the image upload.
@using Syncfusion.Blazor.RichTextEditor
<SfRichTextEditor>
<RichTextEditorEvents OnImageUploadFailed="@OnImageUploadFailedHandler">
<RichTextEditorEvents>
</SfRichTextEditor>
@code{
public void OnImageUploadFailedHandler(ImageFailedEventArgs args)
{
// Here you can customize your code
}
}
OnImageRemoving
OnImageRemoving
event triggers when the selected image is cleared from the insert image dialog.
@using Syncfusion.Blazor.RichTextEditor
<SfRichTextEditor>
<RichTextEditorEvents OnImageRemoving="@OnImageRemovingHandler">
<RichTextEditorEvents>
</SfRichTextEditor>
@code{
public void OnImageRemovingHandler(RemovingEventArgs args)
{
// Here you can customize your code
}
}
OnImageDelete
OnImageDelete
event triggers when the selected image is cleared from the Rich Text Editor Content.
@using Syncfusion.Blazor.RichTextEditor
<SfRichTextEditor>
<RichTextEditorEvents OnImageDelete="@OnImageDeleteHandler">
<RichTextEditorEvents>
</SfRichTextEditor>
@code{
public void OnImageDeleteHandler(AfterImageDeleteEventArgs args)
{
// Here you can customize your code
}
}
Created
Created
event triggers when the Rich Text Editor is rendered.
@using Syncfusion.Blazor.RichTextEditor
<SfRichTextEditor>
<RichTextEditorEvents Created="@CreatedHandler"><RichTextEditorEvents>
</SfRichTextEditor>
@code{
public void CreatedHandler(Object args)
{
// Here you can customize your code
}
}
Destroyed
Destroyed
event triggers when the Rich Text Editor is destroyed.
@using Syncfusion.Blazor.RichTextEditor
<SfRichTextEditor>
<RichTextEditorEvents Destroyed="@DestroyedHandler"><RichTextEditorEvents>
</SfRichTextEditor>
@code{
public void DestroyedHandler(DestroyedEventArgs args)
{
// Here you can customize your code
}
}
Blur
Blur
event triggers when Rich Text Editor is focused out.
@using Syncfusion.Blazor.RichTextEditor
<SfRichTextEditor>
<RichTextEditorEvents Blur="@BlurHandler"><RichTextEditorEvents>
</SfRichTextEditor>
@code{
public void BlurHandler(BlurEventArgs args)
{
// Here you can customize your code
}
}
OnToolbarClick
OnToolbarClick
event triggers when Rich Text Editor Toolbar items is clicked.
@using Syncfusion.Blazor.RichTextEditor
<SfRichTextEditor>
<RichTextEditorEvents OnToolbarClick="@OnToolbarClickHandler"><RichTextEditorEvents>
</SfRichTextEditor>
@code{
public void OnToolbarClickHandler(ToolbarClickEventArgs args)
{
// Here you can customize your code
}
}
Focus
Focus
event triggers when Rich Text Editor is focused in.
@using Syncfusion.Blazor.RichTextEditor
<SfRichTextEditor>
<RichTextEditorEvents Focus="@FocusHandler"><RichTextEditorEvents>
</SfRichTextEditor>
@code{
public void FocusHandler(FocusEventArgs args)
{
// Here you can customize your code
}
}
ValueChange
ValueChange
event triggers only when Rich Text Editor is blurred and changes are done to the content.
@using Syncfusion.Blazor.RichTextEditor
<SfRichTextEditor>
<RichTextEditorEvents ValueChange="@ValueChangeHandler"><RichTextEditorEvents>
</SfRichTextEditor>
@code{
public void ValueChangeHandler(ChangeEventArgs args)
{
// Here you can customize your code
}
}
OnResizeStart
OnResizeStart
event triggers only when resizing the image is started.
@using Syncfusion.Blazor.RichTextEditor
<SfRichTextEditor>
<RichTextEditorEvents OnResizeStart="@OnResizeStartHandler"><RichTextEditorEvents>
</SfRichTextEditor>
@code{
public void OnResizeStartHandler(ResizeArgs args)
{
// Here you can customize your code
}
}
OnResizeStop
OnResizeStop
event triggers only when resizing the image is stopped.
@using Syncfusion.Blazor.RichTextEditor
<SfRichTextEditor>
<RichTextEditorEvents OnResizeStop="@OnResizeStopHandler"><RichTextEditorEvents>
</SfRichTextEditor>
@code{
public void OnResizeStopHandler(ResizeArgs args)
{
// Here you can customize your code
}
}
AfterPasteCleanup
AfterPasteCleanup
event triggers after cleaning up the copied content.
@using Syncfusion.Blazor.RichTextEditor
<SfRichTextEditor>
<RichTextEditorEvents AfterPasteCleanup="@AfterPasteCleanupHandler"><RichTextEditorEvents>
</SfRichTextEditor>
@code{
public void AfterPasteCleanupHandler(PasteCleanupArgs args)
{
// Here you can customize your code
}
}