This is a migrated thread and some comments may be shown as answers.

Using HTMLFormatting and handling image width and height

3 Answers 92 Views
RichTextBox
This is a migrated thread and some comments may be shown as answers.
Tracey
Top achievements
Rank 1
Tracey asked on 05 Apr 2011, 09:27 AM
Hi I am using the RadRichTextBox as a html editor and using the following to format the html

 

 

 

HtmlFormatProvider htmlFormatProvider = new HtmlFormatProvider();
HtmlExportSettings settings = new HtmlExportSettings { ImageExportMode = ImageExportMode.ImageExportingEvent, DocumentExportLevel = DocumentExportLevel.Fragment, StylesExportMode = StylesExportMode.Inline };
settings.ImageExporting += (s, e) =>
{
    e.Src = e.Image.UriSource.ToString();
    e.Alt = "image";
    // TODO Prob can't put width and height in.....
};
htmlFormatProvider.ExportSettings = settings;
HtmlData.FormatProvider = htmlFormatProvider;

Where HtmlData is the HtmlDataProvider

 

When I add an image to the rich text box I do the following

ImageInline  img = new ImageInline();
img.UriSource = new Uri(SelectedImage.Url, UriKind.Absolute);
img.Width = maxwidth;
richTextBox.InsertInline(img);

 

For large images I want to reset the width so they will display on the page. My question is is there a way to set the width and height of the image so that it gets set in the img tag so when I read the html the image is displayed at the set width.

I thought perhaps putting the image into a Span or Inline and setting the width of that might do the job but I can't see how to set the width of these (I thought it might be in the Style but can't find it...)

 

Hope this makes sense

 

Kind Regards
Tracey

3 Answers, 1 is accepted

Sort by
0
Iva Toteva
Telerik team
answered on 08 Apr 2011, 01:36 PM
Hello Tracey,

If you set the width of the image when you are inserting it, it will get properly exported in the HTML.
As for why the approach you mention is not applicable: Spans can contain only text , so you cannot add an image to a span. The document is split into spans according to its formatting - adjacent spans with similar formatting are merged and vice versa, when you have some text with uniform formatting and change the font size, fore color or any other property of a part of it, the span gets split into 2 or 3 others. That is why it won't make much sense to set a Height or Width to a span.
In my opinion, the best approach would be to set the width and height of the image at the time of the insertion, like this:

ImageInline img = new ImageInline();
img.UriSource = new System.Uri(url, UriKind.Relative);
 
if (img.Width > maxwidth)
{
    double heightWidthRatio = img.Height / img.Width;
    img.Width = maxwidth;
    img.Height = maxwidth * heightWidthRatio;
}
radRichTextBox1.InsertInline(img);

The images will be exported with these setting and will be imported back properly.
If you are loading external HTML files that can contain larger images, you can traverse the document, find them and reset their size like this:
private void ResizeAllImagesInDocument()
{
    int maxwidth = 100;
    foreach (var image in this.radRichTextBox1.Document.EnumerateChildrenOfType<ImageInline>())
    {          
        if (image.Width > maxwidth)
        {
            double heightWidthRatio = image.Height / image.Width;
            image.Width = maxwidth;
            image.Height = maxwidth * heightWidthRatio;
        }
    }
}

I hope that helps.

Greetings,
Iva
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Tracey
Top achievements
Rank 1
answered on 08 Apr 2011, 02:05 PM
Hi Iva

Thanks for getting back to me. I'm afraid this doesn't really answer my question it only addresses the issue of sizing the image in the RadRichTextBox . I am using the telerik RadRichTextBox as a html editor to for a html website. The <img> tag that gets saved doesn't contain any width or height information so when the html is being shown on the website the image is displayed at it's actual (sometimes massive) size.

 


0
Ivailo Karamanolev
Telerik team
answered on 12 Apr 2011, 02:54 PM
Hi Tracey,

We have discovered an issue where the widths and heights of images exported with URI src instead of Base64 encoded data are not present in the HTML. This has been fixed and the changes will be visible in the service pack to be released in the next few days.

Greetings,
Ivailo
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Tags
RichTextBox
Asked by
Tracey
Top achievements
Rank 1
Answers by
Iva Toteva
Telerik team
Tracey
Top achievements
Rank 1
Ivailo Karamanolev
Telerik team
Share this question
or