Can't get local path to image HtmlFormatProvider

[Matthew]

Hello!
I try get path to image which is inserted to RadRichTextBox (with help RadRichTextBoxRibbonUI). I need local path on my computer.

i try it:

HtmlFormatProvider fp = new HtmlFormatProvider();
fp.ExportSettings = new HtmlExportSettings
{
        StylesExportMode = StylesExportMode.Inline,
        DocumentExportLevel = DocumentExportLevel.Fragment,
        ExportStyleMetadata = false,
        ImageExportMode = ImageExportMode.ImageExportingEvent
};

fp.ExportSettings.ImageExporting += OnImageExporting;
string html = fp.Export(editor.Document);
.....
private void OnImageExporting(object sender, ImageExportingEventArgs e)
{
        string path = e.Image.UriSource.AbsoluteUri;
}

But e.Image.UriSource is null.

And I try it:

HtmlFormatProvider fp = new HtmlFormatProvider();
fp.ExportSettings = new HtmlExportSettings
{
    StylesExportMode = StylesExportMode.Inline,
    DocumentExportLevel = DocumentExportLevel.Fragment,
    ExportStyleMetadata = false,
    ImageExportMode = ImageExportMode.UriSource
};

string html = fp.Export(editor.Document);

But in string html  I do not see <img> tag.

Please, help me as soon as possible.
Thanks!

[Iva Toteva]

Hello Matthew,

The InsertImageCommand of RadRichTextBox does not read and save the local path of the image. Therefore, setting the export mode of HtmlFormatProvider to UriSource will not produce the desired result.

In order to be able to use the local path, you have to implement a command that set the UriSource of the image when you insert it. This can be done like this:

    public class InsertPictureWithRelativeSourceCommand : RichTextBoxCommandBase
    {
        #region Constructors

        public InsertPictureWithRelativeSourceCommand(RadRichTextBox editor)
            : base(editor)
        {
        }

        #endregion

        #region Methods

        protected override void ExecuteOverride(object parameter)
        {
            OpenFileDialog ofd = new OpenFileDialog();
            ofd.Filter = "Image Files (*.bmp, *.jpg, *.jpeg, *.png, *.tif, *.tiff, *.gif, *.ico, *.wdp, *.hdp)|*.bmp;*.jpg;*.jpeg;*.png;*.tif;*.tiff;*.gif;*.ico;*.wdp;*.hdp";

            if (ofd.ShowDialog() == true)
            {
                string extension;

                extension = Path.GetExtension(ofd.FileName);
                if (this.IsSupportedImageFormat(extension))
                {
                    Stream imageStream;

                    imageStream = ofd.OpenFile();

                    using (imageStream)
                    {
                        this.AssociatedRichTextBox.InsertInline(new ImageInline(imageStream) { UriSource = new Uri(ofd.FileName) });
                    }
                }
            }
        }

        private bool IsSupportedImageFormat(string extension)
        {
            if (extension != null)
            {
                extension = extension.ToLower();
            }

            return extension == ".jpg" ||
                extension == ".jpeg" ||
                extension == ".png" ||
                extension == ".bmp" ||
                extension == ".tif" ||
                extension == ".tiff" ||
                extension == ".ico" ||
                extension == ".gif" ||
                extension == ".wdp" ||
                extension == ".hdp";
        }
}

Then, you can set this command to the button in the RibbonUI by removing the attached command, naming the button (e.g. "insertPicture") and assigning its Command property like this:

this.insertPicture.Command = new InsertPictureWithRelativeSourceCommand(this.editor);

Please find attached a demo illustrating how this can be done, as well as the setting of the HtmlFormatProvider.

All the best,
Iva Toteva
the Telerik team

[deepak]

Hello Iva Toteva
if we edit the image using image editor. then it does not export to html.
Thanks
Deepak

[Iva Toteva]

Hello Deepak,

When the image is modified using the ImageEditor or the ImageMiniToolBar, its UriSource is cleared, because the image at the previous path is not modified and the result would not be correct.

What you can do is to handle the ImageExporting event of HtmlExportSettings, save the image to a predefined path or in a database and set the src in the HTML file accordingly.

Please find attached a demo illustrating how this can be done.

All the best,
Iva Toteva
the Telerik team