I am testing the new Beta RichTextBox for use when when the production version is released next month. I am attempting to do a simple format of an html string into the textbox. The text gets loaded, but the image does not. I am at my wits end trying to get this to work (I assume its something stupid I'm missing). Any help would be appreciated. Thanks.
| public void LoadTemplate(EmailTemplate template) |
| { |
| this.editor.Document = CreateRadDocument(); |
| } |
| private RadDocument CreateRadDocument() |
| { |
| string content = @"<html><body><h1>My First Heading</h1><p>My first paragraph.</p><img src=""http://media.jsonline.com/designimages/logo4_JSO.gif"" /></body></html>"; |
| IDocumentFormatProvider provider = new HtmlFormatProvider(); |
| RadDocument document; |
| using (MemoryStream stream = new MemoryStream()) |
| { |
| StreamWriter writer = new StreamWriter(stream); |
| writer.Write(content); |
| writer.Flush(); |
| stream.Seek(0, SeekOrigin.Begin); |
| document = provider.Import(stream); |
| } |
| return document; |
| } |
7 Answers, 1 is accepted
In the Beta version, when importing from HTML the images are not loaded automatically. You can do that manually by attaching to the LoadImageFromUrl event of the HtmlImportSettings class when importing the document. This event is fired for every <src> tag in the imported HTML document and allows you to manually set the stream form which the image will be loaded. Here is a example:
First create HtmlImportSettings and attach to the LoadImagFromUrl event:
HtmlImportSettings settings = new HtmlImportSettings(); settings.LoadImageFromUrl += new EventHandler<LoadImageEventArgs>(settings_LoadImageFromUrl);HtmlFormatProvider provider = new HtmlFormatProvider();provider.ImportSettings = settings;Load the image stream:
private void settings_LoadImageFromUrl(object sender, LoadImageEventArgs e){ try { if (e.Url != null) { string extension = this.GetExtensionFromURL(e.Url); Uri uri = new Uri(e.Url, UriKind.RelativeOrAbsolute); WebClient client = new WebClient(); client.OpenReadCompleted += (s, a) => { if (a.Error == null) { try { e.ImageElement.Init(a.Result, extension); } catch { //Handle errors } } }; client.OpenReadAsync(uri); } } catch { //Handle errors }}Note that the Silverlight plug-in has some limitations about cross-domain http requests. In the upcoming official version of RadRichTextBox (Q2) the HtmlFormatProvider class will try to load the images automatically if there are no security issues. You will still be able to attach to LoadImageFromUrl event though.
I hope this was helpful.
Kind regards,
Alex
the Telerik team
Rank 1
Hi Alex,
Thanks for the insight... however, I implemented your methods but am still unable to load images via HTML in the radrichtextbox. I have converted to use the production version.
Do you have a small test app/example that shows all the steps and nuances of loading html images? I've even created a handler (Images.ashx) in the Silverlight web app to pull the images so I don't have any cross-domain security issues.
private RadDocument CreateRadDocument(string content) { HtmlImportSettings settings = new HtmlImportSettings(); settings.LoadImageFromUrl += new EventHandler<LoadImageEventArgs>(settings_LoadImageFromUrl); HtmlFormatProvider provider = new HtmlFormatProvider(); provider.ImportSettings = settings; content = @"<html><body><h1>Test Heading</h1><p>Test paragraph.</p><img src=""http://media.jsonline.com/designimages/logo4_JSO.gif"" /></body></html>"; RadDocument document; using (MemoryStream stream = new MemoryStream()) { StreamWriter writer = new StreamWriter(stream); writer.Write(content); writer.Flush(); stream.Seek(0, SeekOrigin.Begin); document = provider.Import(stream); } return document; } void settings_LoadImageFromUrl(object sender, LoadImageEventArgs e) { try { if (e.Url != null) { string extension = "gif"; Uri uri = new Uri(e.Url, UriKind.RelativeOrAbsolute); WebClient client = new WebClient(); client.OpenReadCompleted += (s, a) => { if (a.Error == null) { try { e.ImageElement.Init(a.Result, extension); } catch { //Handle errors } } }; Uri temp = new Uri(string.Format( "{0}/Image.ashx?u={1}", Application.Current.Host.Source.AbsoluteUri.Replace("/ClientBin/SilverlightEmailTemplate.xap", ""), System.Windows.Browser.HttpUtility.UrlEncode(uri.ToString()))); client.OpenReadAsync(temp); } } catch { //Handle errors } }Thanks.
Fortunately after the Q2 release there is no need to load images manually. The HtmlFormatProvider will do this for you automatically. However I noticed that you are trying to load image in .gif format which is not supported in Silverlight out of the box. Please refer to this blog post for a custom gif decoder:
http://blogs.msdn.com/b/jstegman/archive/2009/09/08/silverlight-3-sample-updates.aspx
You can try using a custom decoder to convert the images in the LoadImageFromUrl event of HtmlImportSettings , that you can use with HtmlFormatProvider.
Unfortunately currently we are not able to provide example. If your scenario permits, we suggest you to use .jpg or .png if you the images to be displayed correctly in the RadRichTextBox.
Please find attached a sample application that loads some images form Html.
Alex
the Telerik team
Rank 1
Thanks for the demo Alex.
i was able to get the demo to work. However, I am still unable to load images into the RichTextBox that are not stored locally. I can load these images in Silverlight with a normal image control... but not when they are contained with the HTML.
Does the RichtextBox allow for cross-domain images to display? If so, do you have an example of this.
This is the type of HTML I need to load.
content =
@"<html><body><h1>Test Heading</h1><p><font size=""3"" color=""red"">This is some text!</font></p><img alt="" src=""http://dev.brokerbriefcase/bb6/genericsearchresult.png"" /></body></html>";
Thanks!
There was some issues with loading images without specifying width and height attributes. You can wait for the Service Pack 1 release, which is coming soon. In it, loading without them is also supported.
Another option will be to specify them explicitly, like (for example) this:
content =@"<html><body><h1>Test Heading</h1><p><font size=""3"" color=""red"">This is some text!</font></p><img alt="" src=""http://dev.brokerbriefcase/bb6/genericsearchresult.png"" 
width=""16"" height=""16""/></body></html>";Sincerely yours,
Boby
the Telerik team
Rank 1
I added the width and height... still nothing. Any other ideas?... or should I wait for SP1 (do you know when that will be released?). Do you have a small example with a uri image that you could send me as an example?
Thanks.
content = @"<html><body><h1>Test Heading</h1><img alt="" src=""http://dev.brokerbriefcase/bb6/genericsearchresult.png"" height=""20"" width=""20"" /></body></html>";We cannot find problems with your HTML, as long as the image is residing in the same domain as your Silverlight application. However, if you are trying to access images from different domain (which I believe is what you are doing judging by the absolute URL), maybe you are experiencing issues with Silverlight cross-domain calls.
Please notify us if this is not the case, or if you have any further problems.
Greetings,
Boby
the Telerik team