Rich Text Editor / Miscellaneous / Events

Blazor Rich Text Editor Example - Events

Loading Syncfusion Blazor Server Demos…

The Rich Text Editor component is a WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content. Users can format their content using the standard toolbar commands.

Key features:

Provides <IFRAME> and <DIV> modes
Capable of handling markdown editing.
Contains a modular library to load the necessary functionality on demand.
Provides a fully customizable toolbar.
Provides HTML view to edit the source directly for developers.
Supports third-party library integration.
Allows preview of modified content before saving it.
Handles images, hyperlinks, video, hyperlinks, uploads, etc.
Contains undo/redo manager.
Creates bulleted and numbered lists.

Event Trace

This sample demonstrates the events that trigger on every action of the Rich Text Editor. The event details are displayed in the event trace panel.

The Rich Text Editor triggers events based on its actions. These events can be used as extension points to perform custom operations. Key events include:

ValueChange - Triggers when the editor loses focus and changes are made to the content.
Focus - Triggers when the editor receives focus.
Blur - Triggers when the editor loses focus.
OnActionBegin - Triggers before command execution.
OnActionComplete - Triggers after command execution.
Created - Triggers when the component is created.
OnDialogOpen – Triggers when a dialog is being opened.
DialogOpened – Triggers when a dialog is opened.
OnDialogClose – Triggers when a dialog is being closed.
DialogClosed – Triggers after a dialog has been closed.
OnQuickToolbarOpen – Triggers when the quick toolbar is being opened.
QuickToolbarOpened – Triggers when a quick toolbar is opened.
QuickToolbarClosed – Triggers after the quick toolbar has been closed.
OnImageSelected – Triggers when an image is selected or dragged into the insert image dialog.
BeforeUploadImage – Triggers when the selected image begins to upload to the server.
ImageUploadChange – Triggers when the image is successfully uploaded and the value changes in the Rich Text Editor uploader.
OnImageUploadSuccess – Triggers when the image is successfully uploaded to the server.
OnImageUploadFailed – Triggers when there is an error in image upload.
OnImageRemoving – Triggers when the selected image is cleared from the insert image dialog.
ImageDelete – Triggers when the selected image is cleared from the Rich Text Editor content.
Destroyed – Triggers when the component is destroyed.
OnResizeStart – Triggers only when you start resizing an image.
OnResizeStop – Triggers only when you stop resizing an image.
OnToolbarClick – Triggers when Rich Text Editor toolbar items are clicked.
SelectionChanged – Triggers only when the selection within the editor is modified.
OnMediaDrop – Triggers whenever a media file such as video, audio, or image is dragged and dropped into the editor.