We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
  1. Home
  2. Forum
  3. Xamarin.Forms
  4. How to display HTML content inside SfRichtextEditor that comes as a string?

How to display HTML content inside SfRichtextEditor that comes as a string?

I need to display HTML content in SfRichTextEditor which I'm going to use as a email body creating text editor. The goal is to display the HTML content that I retrieve from an API. From that API, the HTML content comes as a string. So I need to convert that string to a valid HTML code (as a string it has ' ' and ' \" ' characters ).
Before that I have been trying to display HTML content in the SfRichTextEditor by setting the HTMLText property. But it did not work. The final HTML I'm going to display will be a complex HTML (a HTML table with images and text formatting). How can I do this?

This is what I initially tried. But this did not work.

public SharePage()

        {

            InitializeComponent();


            richtexteditor.HtmlText = BuildHTMLContent();

        }


private string BuildHTMLContent()

        {

            StringBuilder htmlStr = new StringBuilder("");

            htmlStr.Append("<html><body><table>");

            htmlStr.Append("<table width='100%' height='20%' Border='1px solid black'>");


            htmlStr.Append("<tr>");

            htmlStr.Append("<th> FirstName </th>");

            htmlStr.Append("<th>LastName </th></tr>");


            htmlStr.Append("<tr>");

            htmlStr.Append("<td>Disha </td>");

            htmlStr.Append("<td>Raval</td></tr>");


            htmlStr.Append("<tr>");

            htmlStr.Append("<td>Namrata</td>");

            htmlStr.Append("<td>Rathod</td></tr>");


            htmlStr.Append("<tr>");

            htmlStr.Append("<td>Monika</td>");

            htmlStr.Append("<td>Vaghasiya</td></tr>");


            htmlStr.Append("</table></body></html>");


            return htmlStr.ToString();

        }


6 Replies
HD Hemalatha Duraisamy Syncfusion Team March 29, 2023 04:42 PM UTC

We have created a simple sample to reproduce the reported issue with the provided code snippet, but the behavior is working as expected. Please find the sample and video in the below link for your reference.


Sample Link:  https://www.syncfusion.com/downloads/support/directtrac/general/ze/RTEHTMLSample-1310493195

Video Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/RTEHTML-198543568


If our understanding is different from your requirement, could you please provide the following details to investigate further on this issue.  

  1. Modify / Simple sample with which the issue could be reproduced.
  2. Replication procedure to reproduce the issue or video illustrating the issue.

The above details will be more helpful for us to reproduce the issue in our side and assist you with the better solution at the earliest.  



RU Ruvindra March 31, 2023 07:45 AM UTC

Hi,

Thanks for your reply. Yes it works fine like that.
But when I set a complex html as the HtmlText it shows in a weird way. Is there anyway to disable the scrolling inside the SfRichText editor (webview).

I have attached below the sample with the issue and also I have attached the screenshots of how I need it to look like in a narrow mobile screen (This is how it should be displayed inside SfRichTextEditor).

Please help me to achieve this with SfRichTextEditor.

Thanks


MicrosoftTeams-image.jpg


MicrosoftTeams-image (1).jpg


Attachment: RTEHTMLSample_44bfb194.zip

HD Hemalatha Duraisamy Syncfusion Team April 3, 2023 05:42 PM UTC

Currently we do not have support for “Disabling the scrolling inside the SfRichTexteditor”. Based on your requirement we suspect “You want to scroll the Rich text editor at the last line of the text". Could you please confirm us whether this is what you have mentioned as above in your update?.



RU Ruvindra replied to Hemalatha Duraisamy April 9, 2023 06:23 AM UTC

No that is not what I meant. When the width of the SfRichTextEditor is about the size of width of the phone's display it should look like above screenshots. That means there shouldn't be a horizontal scroll. The content should instead be packed horizontally like how a normal browser displays the content when I resize the browser narrowly like above screenshots.  That means SfRichTextEditor should display the HTML content as responsive. 


This is how it shows now:

It only shows the half of the content. To see the other part I have to scroll horizontally. But in above screenshots of a normal browser it displays responsive and packed into that size. 



HD Hemalatha Duraisamy Syncfusion Team April 10, 2023 05:55 PM UTC

We are forwarded the reported query with our internal development team. We will update the further detail, once they provided the suggestion.


HD Hemalatha Duraisamy Syncfusion Team April 12, 2023 05:58 PM UTC

On further analysis, we found that we have implemented RichTextEditor control from Content editable DIV which inside the HTML file. The reported issue not related to RichTextEditor control. Where the same issue occurs in content editable DIV also. So, this is the behavior of content editable DIV.


Please find the Simple Content editable DIV sample link:

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


Loader.
Live Chat Icon For mobile
Up arrow icon