Blazor Rich Text Editor Example - Image Option
Insert Image in Rich Text Editor!
You can insert and edit images within this editor. Click inside the editor and use the image tool to add an image.
What You Can Do
- Insert Images: Upload images from local storage or provide an image URL.
- Resize & Drag: Easily adjust image dimensions and reposition them within the content.
- Align Images: Set images to align left, center, or right.
- Caption Support: Add captions to describe your images.
- Replace & Remove: Change or delete images as needed.
Try It Out!
Or drop files here
Or drop files here
Or drop files here
Properties
Enable AutoUrl |
|
Save Format |
This sample demonstrates the option to insert an image into the Rich Text Editor content. Click the Insert Image button in the toolbar to insert an image.
When you select an image in the Rich Text Editor, a quick toolbar appears with customization tools. The quick toolbar includes the following items:
- Replace - Replace the image with another image.
- Align - Align the image with left, right, and justify options.
- Image Captions - Set captions for the image.
- Change Size - Modify width and height of the image.
- Delete - Delete the image.
- Link - Add a link to the image.
- Display - Wrap text around the image using inline and break options.
- Alternate Text - Provide alternative text displayed if the image is unavailable.
Additionally, to resize the image, select it and drag a corner handle. The commands displayed in the quick toolbar can be customized using properties of RichTextEditorQuickToolbarSettings.