InsertHTMLText with images

[David Sancho]

Hello,

I'm trying to insert images when the user clicks in the image toolbar button. I present a page and the user select an online image (image link). Then, I use the InsertHTMLText with the following text "<p><img src='https://cajapp.com/cajapplogo.png'/></p>" but nothing it's displayed. But if I do this 

editor.HtmlText = editor.HtmlText + "<p><img src='https://cajapp.com/cajapplogo.png'/></p>";

then it works. The problem it's that I want to insert the image where the cursor it's and not at the end.

Any idea?

Thanks

[Gayathri Ramalingam]

Hi David, 

 

Thank you for using Syncfusion products. 

 

We can set the image in RichTextEditor using ‘HtmlText’ property. RichTextEditor displays text and images based on the given input in which place you have set the image on it. For ex, If you want to display images between text, please use the below code snippet, 

 

 

editor.HtmlText = editor.HtmlText + "<p><img src='https://cajapp.com/cajapplogo.png'/></p>" + editor.HtmlText; 

        

 

 

Please find the screen shot from below, 

 

 

 

Please let us know if any further assistance required 

 

 

With Regards, 

Gayathri R 

[David Sancho]

Hi Gayathri,

thanks for your response BUT I want to insert images at the current cursor position (that's why I tried to use InsertHTMLText). With your code snippet, current text it's duplicated. For example, if the user has the following text in the editor:

"one two three" and wants to insert an image between "one" and "two", moves the cursor between these two words, press the image button, selects an image and I want to insert the "<p><img src='https://cajapp.com/cajapplogo.png'/></p>" code so the image it's in the correct place. InsertHTMLText it's suppoused to do that.

With your code snippet the user will get: "one two three <p><img src='https://cajapp.com/cajapplogo.png'/></p> one two three".

Greetings,

  David

[Gayathri Ramalingam]

Hi David, 

 

Thank you for your update. 

 

The SfRichTextEditor provides support to insert JPEG and PNG images from a photo gallery, embedded resource, or stream into the Rich Text Editor content based on your cursor position. In that you can  insert images when clicks in the image toolbar button and image can be inserted in the SfRichTextEditor using the ImageInsertCommand property or the ImageInserted event. Kindly try the below code snippet in which you can load the image from URL with desired position. 

 

  private void RTE1_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 Image from application with embedded resource. 

 

            Stream image = assembly.GetManifestResourceStream("ImageRTE.1mb.png"); 

            imgSrc.ImageStream = image; 

 

            imgSrc.SaveOption = ImageSaveOption.Base64; 

 

            RTE1.InsertImage(imgSrc);             

 

            //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; 

 

            RTE1.InsertImage(imgSrc); 

        } 

 

 

We created a video for illustrating the same and it can be downloaded from the below links, 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/ImageInsertVideo1035205393 

 

 

We have created sample based on your requirement and it can be downloaded from below link, 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/ImageRTESample1124290728 

 

 

Could you please try the above suggested solution and let us know whether it meets your requirement or not?   

 

 

With Regards, 

Gayathri R