This sample demonstrates the option to insert the image to the Rich Text Editor content. Click the image button from the toolbar item to insert the image.
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!
|
Enable AutoUrl
|
|
|
Save Format
|
|
Image tools used to insert an image to the Rich Text Editor and click on the image to easily customize the image using quick toolbar. The quick toolbar has the following items Replace – can replace the image with some other image. Align – Align the image with left, right and justify. Image captions – set the captions for the image. Change size – modify width and height of image. Delete – delete the image. Link – provide the link to the image. Display - display the image as inline or with break. Alternate text – provide the alternative text for the image if the image is not present in the location. Custom Tools - "rotation" related commands are added as custom commands to the image element Resize – can resize the image dimension with resize options. Quick commands are opened as context-menu on clicking the corresponding element. The commands must be passed as string collection to image, text, and link attributes of the quickToolbarSettings property. Injecting Module: Rich Text Editor features are segregated into individual feature-wise modules. To use image tool, we need to inject image module using the RichTextEditor.Inject(Image).