How to: Retain the Image URI in HTML Document

• Jan 23, 2019
• 3 minutes to read

This example describes HTML export in more detail and provides a solution on how to store the original image URI in the exported document.

When RichEditControl loads an HTML document, it performs HTML import and transforms the document into a native document model. When RichEditControl saves a document, it performs a document export from the native format to the resulting document’s format.

When saving a document as HTML, there are two options for saving images, described in the table.

Option	HTML Sample
Embed images into the resulting file as base64-encoded data	HTML <img src="data:image/png;base64,,iVBORw0KGgoAAAANSUhEUgAAAQQAAA<!-- base64 data -->" width="260" height="90" alt="" style="border-width:0px;" />
Save images as separate files. The images are named with the “image” word followed by its sequential number in a file. Images are saved to the folder with the name that is the combination of the file name, underscore and the “files” word. That is, the first png image in the resulting Test.html file is saved to the Test_files\image0.png location.	HTML <img src="test_files/image0.png" alt="" style="border-width:0px;" />

Different methods produce different results, as shown in the following table.

Export	Result
RichEditControl.HtmlText property	Images are contained in the resulting file as base64-encoded data.
SubDocument.GetHtmlText method	The HtmlDocumentExporterOptions parameter allows specifying embedded or standalone images by setting the HtmlExportOptionsBase.EmbedImagesInHTML property.
RichEditControl.SaveDocument or RichEditControl.SaveDocumentAs methods, the SaveDocumentAsCommand command	The HtmlDocumentExporterOptions.EmbedImages property accessible using the RichEditControl.ExportOptions.HtmlOptions.EmbedImages notation determines whether images are embedded or saved as separate files.

The HTML exporter uses an URI provider instance to obtain the URI string for each image. There are several built-in URI providers - the FileBasedUriProvider which provides image file names and the DataStringUriProvider that constructs a tag for embedded base64 data. The built-in URI provider service (a service that implements the IUriProviderService interface) is used to obtain a provider instance of a proper type.

You can implement a custom URI provider to specify a custom location for each image when the document is saved to an HTML format. To accomplish this, create a IUriProvider descendant and register it in RichEditControl services.

Tip

The SubDocument.GetHtmlText method allows you to specify a custom URI provider as the method’s parameter, bypassing the URI provider service and the RichEditControl.ExportOptions.HtmlOptions.EmbedImages option.

Each image in RichEditControl has the OfficeImage.Uri property that is the original image URI. To save an original image URI to the exported HTML document, our custom UriProvider returns the OfficeImage.Uri value.

Note

A complete sample project is available at https://github.com/DevExpress-Examples/how-to-retain-original-image-uri-in-html-document-e3189

Form1.cs

using System;
using System.Windows.Forms;
using DevExpress.Office.Services;
using DevExpress.XtraRichEdit.API.Native;
        private void richEditControl1_DocumentLoaded(object sender, EventArgs e)
        {
            IUriProviderService service = richEditControl1.GetService<IUriProviderService>();
            if (service != null) {
                service.RegisterProvider(new CustomUriProvider());
            }
        }

CustomUriProvider.cs

using DevExpress.Office.Services;
using DevExpress.Office.Utils;
using System;
    public class CustomUriProvider : IUriProvider {
        public string CreateCssUri(string rootUri, string styleText, string relativeUri) {
            return String.Empty;
        }

        public string CreateImageUri(string rootUri, OfficeImage image, string relativeUri) {
            return image.Uri;
        }
    }

Form1.vb

Imports System
Imports System.Windows.Forms
Imports DevExpress.Office.Services
Imports DevExpress.XtraRichEdit.API.Native
        Private Sub richEditControl1_DocumentLoaded(ByVal sender As Object, ByVal e As EventArgs) Handles richEditControl1.DocumentLoaded
            Dim service As IUriProviderService = richEditControl1.GetService(Of IUriProviderService)()
            If service IsNot Nothing Then
                service.RegisterProvider(New CustomUriProvider())
            End If
        End Sub

CustomUriProvider.vb

Imports DevExpress.Office.Services
Imports DevExpress.Office.Utils
    Public Class CustomUriProvider
        Implements IUriProvider

        Public Function CreateCssUri(ByVal rootUri As String, ByVal styleText As String, ByVal relativeUri As String) As String Implements IUriProvider.CreateCssUri
            Return String.Empty
        End Function

        Public Function CreateImageUri(ByVal rootUri As String, ByVal image As OfficeImage, ByVal relativeUri As String) As String Implements IUriProvider.CreateImageUri
            Return image.Uri
        End Function
    End Class