Category / Section
How to load image with embedded and from URL in RichTextEditor?
3 mins read
This article explains to load images from URL and embedded resource in the SfRichTextEditor.
Step 1:
Create a SfRichTextEditor sample with all the necessary assemblies. Refer to this Getting started documentation to create a simple SfRichTextEditor sample and configure it.
Step 2:
Use the ImageInserted event to track the image button click event from the toolbar in the SfRichTextEditor.
XAML
<rte:SfRichTextEditor x:Name="RTE" VerticalOptions="FillAndExpand" ImageInserted="RTE_ImageInserted"/>
Step 3:
Attach the method for image inserted event to track the image button click from the toolbar.
Load image from Embedded resource:
C#
private void RTE_ImageInserted(object sender, Syncfusion.XForms.RichTextEditor.ImageInsertedEventArgs e)
{
Syncfusion.XForms.RichTextEditor.ImageSource imgSrc = new Syncfusion.XForms.RichTextEditor.ImageSource();
Assembly assembly = typeof(MainPage).GetTypeInfo().Assembly;
//Load an Image from the application with the embedded resource.
Stream image = assembly.GetManifestResourceStream("ImageRTE.Image.png");
imgSrc.ImageStream = image;
imgSrc.SaveOption = ImageSaveOption.Base64;
RTE.InsertImage(imgSrc);
}
Load Image from URL:
C#
private void RTE_ImageInserted(object sender, Syncfusion.XForms.RichTextEditor.ImageInsertedEventArgs e)
{
Syncfusion.XForms.RichTextEditor.ImageSource imgSrc = new Syncfusion.XForms.RichTextEditor.ImageSource();
//Load Image from URL
var webClient = new WebClient();
byte[] imageBytes = webClient.DownloadData("https://cajapp.com/cajapplogo.png");
MemoryStream stream = new MemoryStream(imageBytes);
stream.Position = 0;
imgSrc.ImageStream = stream;
imgSrc.SaveOption = ImageSaveOption.Base64;
RTE.InsertImage(imgSrc);
}
The sample that explains how to load the image using the ImageInserted event in the Rich Text Editor text can be downloaded here.
