How to: Retain the Image URI in an HTML Document
- 3 minutes to read
This example provides more details on exporting to HTML and describes how to store the original image URI in the exported document.
When RichEditControl loads an HTML document, it imports the document and converts it into a native document model, and then converts the native document to the resulting document’s format when it is saved.
The table below describes the two options for saving images when saving a document as HTML.
Option | HTML Sample |
---|---|
Embed images into the resulting file as base64-encoded data |
|
Save images as separate files. The images are named using the “image” word followed by its sequential number in a file. Images are saved to the folder with a name that combines the file name, an underscore and the “files” word. For example, the first png image in the resulting Test.html file is saved to Test_files\image0.png. |
|
The following table shows the different methods and their results:
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 DXRichEditHtmlDocumentExporterOptions.EmbedImages property, accessible using the RichEditControl.ExportOptions.HtmlOptions.EmbedImages notation, determines whether images are embedded or saved as separate files. |
The HTML exporter uses a URI provider instance to obtain each image’s URI string. There are two 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.
You can implement a custom URI provider to specify a custom location for each image when the document is saved to HTML format. To accomplish this, create an 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 the 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.
When the document is saved to HTML, the built-in URI provider creates links to image files, as illustrated in the following table. A custom URI provider implemented in this example allows you to link images to their original URIs.
Provider | HTML |
---|---|
Built-in FileBasedUriProvider |
|
CustomUriProvider |
|
Note
A complete sample project is available at https://github.com/DevExpress-Examples/dxrichedit-for-wpf-how-to-retain-original-image-uri-in-html-document-e3294.
Imports DevExpress.Office.Services
Imports DevExpress.XtraRichEdit.API.Native
Private Sub richEditControl1_DocumentLoaded(ByVal sender As Object, ByVal e As EventArgs)
Dim service As IUriProviderService = richEditControl1.GetService(Of IUriProviderService)()
If service IsNot Nothing Then
service.RegisterProvider(New CustomUriProvider())
End If
End Sub