Img tag and embedded image

[Kirk Quinbar]

hi,

I have a RadRichTextbox bound to a HtmlFormatProvider. Say i have a tag formatted like below in my html when it is imported through your HtmlFormatProvider into RadRichTextbox:

<img src=http://www.website.com/someimage.png/>

when i look at the output html of the RadRichTextbox and HtmlFormatProvider, it is converting it to no longer be a link to an image but some kind of embedded image:

<img width="272" height="185" src="data:image/png;base64,iVBORw0KGgoAAAANS..." />

This seems to be the default for imported html and also when i insert an image via your ribbon bar (i.e. the Word example on your website).

Is there anyway to have your HtmlFormatProvider or RadRichTextbox not convert the link to an embedded image? and still be able to display it while editing?
 

[Kirk Quinbar]

to go along with the first question.

2. from my testing, using a data uri as you are doing to embed the image will not work if i take the outputted html and send an html email with it. the email will not show the image, at least not in Outlook. What did you choose to format the html img tag using a data uri?

We wanted to use the RadRichTextbox for editing html email templates but the image issue i think is going to prevent that unless you can figure out some way of not converting the url to a data uri.

[Boby]

Hello Kirk Quinbar,
You have the following options:

• Get the Latest Internal Build, where the functionality for exporting images with URI source is implemented correctly. Code snippet for using this will be the following:

  SaveFileDialog saveFileDialog = new SaveFileDialog();
  
  bool result = saveFileDialog.ShowDialog() ?? false;
  if (!result)
  {
      return;
  }
  
  HtmlFormatProvider htmlFormatProvider = new HtmlFormatProvider();
  htmlFormatProvider.ExportSettings = new HtmlExportSettings() { ImageExportMode = ImageExportMode.UriSource };
  
  using (Stream stream = saveFileDialog.OpenFile())
  {
      htmlFormatProvider.Export(radRichTextBox.Document, stream);
  }

• Use HtmlExportSettings.ImageExporting. This way  you have greater control over exporting and can manually set src and alt attributes, like this:

  SaveFileDialog saveFileDialog = new SaveFileDialog();
  
  bool result = saveFileDialog.ShowDialog() ?? false;
  if (!result)
  {
      return;
  }
  
  HtmlFormatProvider htmlFormatProvider = new HtmlFormatProvider();
  
  HtmlExportSettings settings = new HtmlExportSettings { ImageExportMode = ImageExportMode.ImageExportingEvent };
  settings.ImageExporting += (s, e) =>
  {
      e.Src = e.Image.UriSource.ToString();
      e.Alt = "image";
  };
  
  htmlFormatProvider.ExportSettings = settings;
  
  using (Stream stream = saveFileDialog.OpenFile())
  {
      htmlFormatProvider.Export(radRichTextBox.Document, stream);
  }

  This method will work with 2010 Q2 SP1 too.

Additionally, all of the above methods will be applicable to HtmlDataProvider too, as the latest LIB will introduce a property (FormatProvider) of all the data providers which will allow you to customize the way the HtmlDataProvider exports/imports documents.

Feel free to post here if you have any further questions on that.

All the best,
Boby
the Telerik team

[Kirk Quinbar]

ooh this is so close lol

ok using the second method, (since i think you havent released the new version yet?) if i have html with an img tag src of a url, when i import into the editor, it displays the image. when i export html from the editor, then the original img src url is still intact, so then i can use the output html in an html email. perfect.

fyi, the urls we have saved already are pointing to images we uploaded to our servers in the current asp.net app which uses the telerik asp.net htmleditor and image gallery. we want this same functionality in silverlight. so take for example your sample word like editor. you have an insert image button on the toolbar that calls an internal command to popup a dialog to select local image and insert that into the document. this wont work for our purposes, especially with that code you suggested because there is not a valid Image.UriSource. What we need to do is mimic how your asp.net htmleditor works. I found some code like shown below for inserting a image from a url into the document:

ImageInline image = new ImageInline();

image.UriSource = new Uri("http://www.yoursite.com/image.jpg");

image.Extension = ".jpg";

image.Width = 100;

image.Height = 150;

  

// Insert the image at current caret position.

radRichTextBox.InsertInline(image);

1. is this the best way to insert this type of image? Inserting/embedding an image directly as is the default won't work for our purposes since a data uri is not acceptable in html emails.
2. do you have any plans to create an image gallery for your silverlight RadRichTextbox, like you have in your asp.net htmleditor, or have you heard of anyone wanting to do this and what are they using? i am starting to look around to see if someone already has an image gallery we could kinda plugin  or if we would need to write our own, but thought i'd see if something has already been done.

[Boby]

Hello Kirk Quinbar,

You can use both ways mentioned in my previous post for exporting images with the Latest Internal Build (LIB). In the 2010 Q2 SP1 version, only the second way will work.

The code you are using for inserting images with URI is correct. For now we don't have any observations on customers trying to do similar things, so can't give you much help here, but keep in mind that Silverlight security would allow only images from unrestricted locations.

I cannot give any specific timeline for development of 'Image gallery'-like control and I am afraid the list of new features for Q3 is already pretty filled up. And unfortunately we cannot recommend any control of this kind that can help. However it should not be very hard to implement your own image gallery functionality in Silverlight.

Sincerely yours,
Boby
the Telerik team

[Bryan]

Adding an image in this way is not working for me. The Uri is correct, the exported html is correct, but the image I import via ImageInline.UriSource does not display in the editor. I can not set ImageSource because it has no setter.

private void InsertImageClick(object sender, RoutedEventArgs e)
        {
            ImageManagerChildWindow.CreateImageSelectionWindow(selectedImage =>
            {
                var image = new ImageInline()
                {
                    UriSource = new Uri(selectedImage.ImageUrl),
                    Extension = Path.GetExtension(selectedImage.ImageUrl),
                    Width = 150,
                    Height = 150,
                    //ImageSource = new BitmapImage(new Uri(selectedImage.ImageUrl))
                };
 
                editor.InsertInline(image);
            });
        }

[Kirk Quinbar]

can you provide an example of what is being returned in your selectedImage.ImageUrl? more than likely either the url isnt formatted correct or its an image type not supported by silverlight. also the url has to be on the same domain that the silverlight app is running on i believe.

Kirk

[Bryan]

We resolved the issue by adding the clientaccesspolicy.xml file to our servers.

[Iva Toteva]

Hello Chad,

We are glad that the issue was resolved.
Kirk, thank you for your involvement and the valuable help you provided.

Kind regards,
Iva
the Telerik team