How to save image and restore the image in SfRichTextEditor

[Jie]

Hi,

    I tried to save the SfRichTextEditor contents to some data file.  There is an image in the editor.  I want to get the the help on how to save the contents and restore it when the user open a saved file next time.

    Basically what I do is get the html string from the editor by using var htmlData=rte.GetHtmlString() method.  Here there are two options: one is for the image source set the property to be SaveOption = ImageSaveOption.Base64, another one is don't have this flag.

    When we save the image as base64 format and embeded it to the html,  next time when a user open the file he saved, I used the rte.Text = htmlData to store the contents.  But the editor can only handle very small image size. for instance, an image less than 10k in iOS or a bit more in android, otherwise the editor will show empty contents.  I tested in both simulator and real devices. When the image is big size, for instance 1M, the editor will not show the contents.

   When we don't have the base64 parameter, I notice the html string we get will be something like "img src =blob:null\****" , maybe we can use rte.InsertImage(imgSrc) to restore the image. But next time when a user try to open and editor the contents, how can we move the cursor the the position we inserted the image last time.

   Could someone give me some sample code or hint on how to handle this situation.

Thanks,

Jie

[Devaraj Sekar]

Hi Jie,  

Thank you for contacting Syncfusion support.  

S. No	Query	Answer
1.	Basically what I do is get the html string from the editor by using var htmlData=rte.GetHtmlString() method.  Here there are two options: one is for the image source set the property to be SaveOption = ImageSaveOption.Base64, another one is don't have this flag.          When we save the image as base64 format and embeded it to the html,next time when a user open the file he saved, I used the rte.Text = htmlData to store the contents.  But the editor can only handle very small image size. for instance, an image less than 10k in iOS or a bit more in android, otherwise the editor will show empty contents.  I tested in both simulator and real devices. When the image is big size, for instance 1M, the editor will not show the contents.	The mentioned issue with “Large size image is not retrieved properly from Saved SfRichTextEditor content” works as expected from our side. We suggest you use rte.HtmlText property to save and load content from the editor.      We have prepared a sample based on the mentioned requirement, which can be downloaded from the below link.      Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ImageRTE-1798827434.zip       Kindly let us know whether the sample fulfills your requirement. If not, please modify the provided sample to reproduce the exact issue scenario or provide us the detailed information about the design layout which will be helpful for us provide a prompt solution at earliest.
2.	When we don't have the base64 parameter, I notice the html string we get will be something like "img src =blob:null\****" ,	Saving the image as blob cannot be reused, since the data is maintained temporarily in browser for performance improvement. In order to reuse the image data , we suggest you to use the base64 option.
	maybe we can use rte.InsertImage(imgSrc) to restore the image. But next time when a user try to open and editor the contents, how can we move the cursor the the position we inserted the image last time.         Could someone give me some sample code or hint on how to handle this situation.	Currently, we do not have support for “Cursor position property in SfRichTextEditor”. We have added it to our feature request list. We will implement this in any our upcoming release. We will let you know once it is implemented.      FR link: https://www.syncfusion.com/feedback/13720/cursorposition-bindable-property-in-rich-text-editor

 

Regards,  

Devaraj S  

 

[Jie]

Thanks for the help and sample code.  The sample code is very similar to what I do in my projects. In Android simulator, the image loading to the 2nd editor seems ok , although a bit slow.  In iOS simulator, it is still very slow and I am not able to get the image to the 2nd editor for about 5 minutes. 

On the other hand, it seems very efficient to use the method InsertImage() to insert  the image to the editor.  So what I do is use Regex to extract the image base64 formatted string and convert them into Stream.   It seems the images loading is much faster. 

What I did now is use Regex to remove the image tags from the html and paste the contents to Editor first and after that insert images one by one.  But now the image is just on the top of the html contents and not in the original positions.  So I think the feature to control cursor is really helpful in this case.    Please let us know once you have the new feature to control cursor added.

[Devaraj Sekar]

Hi Jie, 

Thank you for the update. 

S. No	Query	Answer
1.	Thanks for the help and sample code.  The sample code is very similar to what I do in my projects. In Android simulator, the image loading to the 2nd editor seems ok , although a bit slow.  In iOS simulator, it is still very slow and I am not able to get the image to the 2nd editor for about 5 minutes.	We are analyzing on the mentioned issue with “Loading delay in iOS platform” and performance improvement in SfRichTextEditor and will let you know further details on 31st August 2020.
2.	What I did now is use Regex to remove the image tags from the html and paste the contents to Editor first and after that insert images one by one.  But now the image is just on the top of the html contents and not in the original positions.  So I think the feature to control cursor is really helpful in this case.    Please let us know once you have the new feature to control cursor added.	We will implement this in any our upcoming release. We will let you know once it is implemented.        FR link: https://www.syncfusion.com/feedback/13720/cursorposition-bindable-property-in-rich-text-editor

Regards, 

Devaraj S 

[Devaraj Sekar]

 Hi Jie,    

Regret for the inconvenience.  

Due to complexity of the issue, we are still validating on the reported issue and will update you further details on 2^nd September 2020.  

Regards,  

Devaraj S 

[Devaraj Sekar]

Hi Jie,  

 

Thank you for the patience.  

 

We have considered you request “Delay with loading images in iOS ”  as feature request . At the planning stage for every release cycle, we review all open features. We will let you know when this feature is implemented. The status of implementation can be tracked through our Features Management System.  

 

FR link: https://www.syncfusion.com/feedback/17623/need-to-minimize-lodaing-delay-in-ios-platform-while-loading-image-saved-html  

 

Kindly let us know if you require further assistance.  

 

Regards,  

 

Devaraj S