Import an HTML File into the Rich Text Editor or Export a Document to HTML

Feb 24, 2025
8 minutes to read

The Rich Text Editor allows you to import HTML files and save documents as HTML. When you open an HTML file, the control converts HTML content into its internal document model. Some HTML tags and CSS attributes have no counterparts in Open XML and RTF formats. You can find more information about supported and unsupported HTML tags in the following help topic: HTML Support Limitations. However, we must emphasize that the Rich Text Editor is not an HTML editor/browser. It can display your HTML document differently from your web browser even if all HTML tags were imported into the control’s document model.

Import HTML Content

Load an HTML Page

Method 1

Use the RichEditControl.DocumentSource property to specify a document source for the Rich Text Editor in XAML.

The following example uses DXBinding to call a method that returns a path to a specified HTML document.

XAML

xaml

<dxre:RichEditControl Name="richEditControl1"
                       CommandBarStyle="Ribbon"
                       DocumentSource= "{DXBinding '$local:HtmlDataSource.GetDocumentPath(`Document.html`)'}">
</dxre:RichEditControl>

C#
VB.NET

csharp

public class HtmlDataSource
{
    public static string GetDocumentPath(string fileName)
    {
        string path = System.IO.Path.Combine(System.Environment.CurrentDirectory, fileName);
        if (System.IO.File.Exists(path))
                return path;
        return "";
    }
}

Public Class HtmlDataSource
    Public Shared Function GetDocumentPath(ByVal fileName As String) As String
        Dim path As String = System.IO.Path.Combine(Environment.CurrentDirectory, fileName)
        If System.IO.File.Exists(path) Then
                Return path
        End If
        Return ""
    End Function
End Class

Read Tutorial: Use the MVVM Pattern to Bind the Rich Text Editor to a Document Source

Method 2

Call the RichEditControl.LoadDocument or RichEditControl.Document.LoadDocument method to import an HTML page into the Rich Text Editor.

C#
VB.NET

csharp

richEditControl1.LoadDocument("HtmlDocument.html", DocumentFormat.Html);

richEditControl1.LoadDocument("HtmlDocument.html", DocumentFormat.Html)

The sourceUri parameter of the LoadDocument method allows you to load files associated with an HTML document.

C#
VB.NET

csharp

richEditControl1.LoadDocument("HtmlDocument.html", DocumentFormat.Html, "HtmlDocument_files");

richEditControl1.LoadDocument("HtmlDocument.html", DocumentFormat.Html, "HtmlDocument_files")

Specify HTML Text

Method 1

Bind the RichEditControl.Content property to a ViewModel property that stores HTML content. Use HtmlToContentConverter to convert HTML data to the control’s content.

XAML

xaml

<dx:ThemedWindow 
    xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:local="clr-namespace:WpfRichTextEditor" 
    xmlns:dxre="http://schemas.devexpress.com/winfx/2008/xaml/richedit" 
    x:Class="WpfRichTextEditor.MainWindow" mc:Ignorable="d" Title="Rich Text Editor" Height="600" Width="800">
    <dx:ThemedWindow.DataContext>
        <local:HtmlViewModel/>
    </dx:ThemedWindow.DataContext>
    <dx:ThemedWindow.Resources>
        <dxre:HtmlToContentConverter x:Key="htmlToContentConverter" />
    </dx:ThemedWindow.Resources>
    <Grid>
        <dxre:RichEditControl CommandBarStyle="Ribbon" 
                              x:Name="richEditControl1" 
                              Content="{Binding HtmlText, Converter={StaticResource htmlToContentConverter}, Mode=TwoWay}">
        </dxre:RichEditControl>
    </Grid>
</dx:ThemedWindow>

C#
VB.NET

csharp

using System.ComponentModel;
using System.Runtime.CompilerServices;
// ...

public class HtmlViewModel : INotifyPropertyChanged
{
    public HtmlViewModel()
    {
        htmlText = File.ReadAllText("Document.html", Encoding.UTF8);
    }

    public HtmlViewModel(string value)
    {
        htmlText = value;
    }

    private string htmlText;
    public string HtmlText
    {
        get { return htmlText; }
        set
        {
            htmlText = value;
            OnPropertyChanged("HtmlText");
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;
    private void OnPropertyChanged([CallerMemberName] string htmlText = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(htmlText));
    }
}

Imports System.ComponentModel
Imports System.Runtime.CompilerServices
' ...

Public Class HtmlViewModel
    Implements INotifyPropertyChanged

    Sub New()
        html = File.ReadAllText("Document.html", Encoding.UTF8)
    End Sub

    Sub New(ByVal value As String)
        html = value
    End Sub

    Private html As String
    Public Property HtmlText() As String
        Get
            Return html
        End Get
        Set(ByVal value As String)
            html = value
            OnPropertyChanged("HtmlText")
        End Set
    End Property

    Public Event PropertyChanged As PropertyChangedEventHandler Implements INotifyPropertyChanged.PropertyChanged

    Protected Sub OnPropertyChanged(<CallerMemberName> Optional html As String = Nothing)
        PropertyChangedEvent?.Invoke(Me, New PropertyChangedEventArgs(html))
    End Sub
End Class

Method 2

Assign HTML text to the RichEditControl.HtmlText or RichEditControl.Document.HtmlText property.

C#
VB.NET

csharp

using System.Net;
// ...

using (var client = new WebClient())
{
    string html = client.DownloadString("https://docs.devexpress.com/WindowsForms/9610/");
    richEditControl1.HtmlText = html;
}

Imports System.Net
' ...

Using client As New WebClient()
    Dim html As String = client.DownloadString("https://docs.devexpress.com/WindowsForms/9610/")
    richEditControl1.HtmlText = html
End Using

You can also use the following methods to insert HTML text into the document:

Define Import Options

The DXRichEditHtmlDocumentImporterOptions class contains options used to import an HTML document into the Rich Text Editor. You can use one of the following methods to specify these options:

Handle the RichEditControl.BeforeImport event;
Use the RichEditControl.ImportOptions.HtmlOptions property.
C#
VB.NET

csharp

using DevExpress.XtraRichEdit;
using DevExpress.Xpf.RichEdit;
using System.Text;
// ...

richEditControl1.BeforeImport += (s, e) =>
{
    if (e.DocumentFormat == DocumentFormat.Html)
    {
        var options = (DXRichEditHtmlDocumentImporterOptions)e.Options;
        // Specify encoding.
        options.AutoDetectEncoding = false;
        options.Encoding = Encoding.UTF8;
        // Skip media rules.
        options.IgnoreMediaQueries = true;
        // Load images synchronously with HTML documents.
        options.AsyncImageLoading = false;
        // Preserve image resolution.
        options.ImageScalingDpi = 96;
    }
};

Imports DevExpress.XtraRichEdit
Imports DevExpress.Xpf.RichEdit
Imports System.Text
' ...

AddHandler richEditControl1.BeforeImport,
    Sub(s, e)
        If e.DocumentFormat = DocumentFormat.Html Then
            Dim options As HtmlDocumentImporterOptions = CType(e.Options, DXRichEditHtmlDocumentImporterOptions)
            ' Specify encoding.
            options.AutoDetectEncoding = False
            options.Encoding = Encoding.UTF8
            ' Skip media rules.
            options.IgnoreMediaQueries = True
            ' Load images synchronously with HTML documents.
            options.AsyncImageLoading = False
            ' Preserve image resolution.
            options.ImageScalingDpi = 96
        End If
    End Sub

Convert HTML To Another Format

After you load an HTML file to the Rich Text Editor, you can export the document to a different format.

Convert HTML to PDF

Use the RichEditControl.ExportToPdf method to export HTML content to PDF. Pass a PdfExportOptions instance to the method to specify export options.

C#
VB.NET

csharp

using DevExpress.XtraRichEdit.API.Native;
using DevExpress.XtraRichEdit;
// ...

Document document = richEditControl1.Document;
// Load an HTML document.
document.LoadDocument("HtmlDocument.html", DocumentFormat.Html);

// Define PDF export options.
var options = new DevExpress.XtraPrinting.PdfExportOptions();
options.ConvertImagesToJpeg = false;
options.ImageQuality = DevExpress.XtraPrinting.PdfJpegImageQuality.Highest;

// Specify page settings before export to PDF.
document.Unit = DevExpress.Office.DocumentUnit.Inch;
// Set page size.
document.Sections[0].Page.Width = 8.5f;
document.Sections[0].Page.Height = 11f;
// Change margin settings.
document.Sections[0].Margins.Top = 0;
document.Sections[0].Margins.Bottom = 0;
document.Sections[0].Margins.Left = 0.2f;
document.Sections[0].Margins.Right = 0.2f;

// Export the document to PDF.
richEditControl1.ExportToPdf("PdfDocument.pdf", options);

Imports DevExpress.XtraRichEdit.API.Native
Imports DevExpress.XtraRichEdit
' ...

Dim document As Document = richEditControl1.Document
' Load an HTML document.
document.LoadDocument("HtmlDocument.html", DocumentFormat.Html)

' Define PDF export options.
Dim options As New DevExpress.XtraPrinting.PdfExportOptions()
options.ConvertImagesToJpeg = False
options.ImageQuality = DevExpress.XtraPrinting.PdfJpegImageQuality.Highest

' Specify page settings before export to PDF.
document.Unit = DevExpress.Office.DocumentUnit.Inch
' Set page size.
document.Sections(0).Page.Width = 8.5F
document.Sections(0).Page.Height = 11F
' Change margin settings.
document.Sections(0).Margins.Top = 0
document.Sections(0).Margins.Bottom = 0
document.Sections(0).Margins.Left = 0.2F
document.Sections(0).Margins.Right = 0.2F

' Export the document to PDF.
richEditControl1.ExportToPdf("PdfDocument.pdf", options)

csharp

using DevExpress.XtraRichEdit.API.Native;
using DevExpress.XtraRichEdit;
// ...

Document document = richEditControl1.Document;
// Load an HTML document.
document.LoadDocument("HtmlDocument.html", DocumentFormat.Html);

// Modify and format the document.
// ...

// Save the document as DOCX.
document.SaveDocument("Document.docx", DocumentFormat.Docx);

Imports DevExpress.XtraRichEdit.API.Native
Imports DevExpress.XtraRichEdit
' ...

Dim document As Document = richEditControl1.Document
' Load an HTML document.
document.LoadDocument("HtmlDocument.html", DocumentFormat.Html)

' Modify and format the document.
' ...

' Save the document as DOCX.
document.SaveDocument("Document.docx", DocumentFormat.Docx)

Import Tips

Implement and register a custom IUriStreamProvider to specify how to load images from an HTML document. For example, you can use this service when you import an HTML file that contains images referenced with a custom prefix.
If you import content from an HTTPS website, you may need to specify the security protocol enabled for this site. For example, if the site uses TLS 1.2 protocol, add the following line to your code:
If you import an HTML file that contains tables and these tables extend into page margins, disable the following option: RichEditControl.Document.CompatibilitySettings.AllowTablesOutstepMargins.
The HTML document is loaded in CompatibilityMode.ModeNotSpecified mode. In this case, the RichEdit Control uses the compatibility settings of previous Microsoft Word versions. Set the CompatibilitySettings.CompatibilityMode property to CompatibilityMode.Mode15 after the document is loaded to enable compatibility with the latest Microsoft Word version and process the document correctly:
RichEditControl imports paragraphs from an HTML document with line spacing between paragraphs (i.e. the SpacingBefore and SpacingAfter properties are set to 12 pt). Change the value of these properties before import to remove line spacing.

Export to HTML

Save as HTML File

Use the RichEditControl.SaveDocument method to export a document to HTML.

C#
VB.NET

csharp

// Load a document.
richEditControl1.LoadDocument("Document.docx");
// Export the document to a file in HTML format.
richEditControl1.SaveDocument("HtmlDocument.html", DocumentFormat.Html);
// Export the document to a file stream in HTML format.
using (FileStream fileStream = new FileStream("HtmlDocument2.html", FileMode.Create)) {
    richEditControl1.SaveDocument(fileStream, DocumentFormat.Html);
}

' Load a document.
richEditControl1.LoadDocument("Document.docx")
' Export the document to a file in HTML format.
richEditControl1.SaveDocument("HtmlDocument.html", DocumentFormat.Html)
' Export the document to a file stream in HTML format.
Using fileStream As New FileStream("HtmlDocument2.html", FileMode.Create)
    richEditControl1.SaveDocument(fileStream, DocumentFormat.Html)
End Using

Note

OLE objects are not exported to the HTML format.

Return HTML Text

Use the RichEditControl.Document.HtmlText property or SubDocument.GetHtmlText method to convert document content to HTML.

C#
VB.NET

csharp

// Load a document.
richEditControl1.LoadDocument("Document.docx");
// Export the document to a file in HTML format.
System.IO.File.WriteAllText("HtmlDocument.html", richEditControl1.Document.HtmlText);

' Load a document.
richEditControl1.LoadDocument("Document.docx")
' Export the document to a file in HTML format.
System.IO.File.WriteAllText("HtmlDocument.html", richEditControl1.Document.HtmlText)

Define Export Options

The DXRichEditHtmlDocumentExporterOptions class contains options used to export a document to HTML. You can use one of the following methods to specify these options:

Handle the RichEditControl.BeforeExport event;
Use the RichEditControl.ExportOptions.HtmlOptions property.
C#
VB.NET

csharp

using DevExpress.XtraRichEdit;
using DevExpress.Xpf.RichEdit;
// ...

richEditControl1.BeforeExport += (s, e) =>
{
    if (e.DocumentFormat == DocumentFormat.Html)
    {
        var options = (DXRichEditHtmlDocumentExporterOptions)e.Options;
        // Embed images in HTML pages.
        options.EmbedImages = true;
        // Specify how to export style sheets.
        options.CssPropertiesExportType = DevExpress.XtraRichEdit.Export.Html.CssPropertiesExportType.Style;
        // Specify the root tag for export.
        options.ExportRootTag = DevExpress.XtraRichEdit.Export.Html.ExportRootTag.Body;
    }
};

Imports DevExpress.XtraRichEdit
Imports DevExpress.Xpf.RichEdit
' ...

AddHandler richEditControl1.BeforeExport,
    Sub(s, e)
        If e.DocumentFormat = DocumentFormat.Html Then
            Dim options As DXRichEditHtmlDocumentExporterOptions = CType(e.Options, HtmlDocumentExporterOptions)
            ' Embed images in HTML pages.
            options.EmbedImages = True
            ' Specify how to export style sheets.
            options.CssPropertiesExportType = DevExpress.XtraRichEdit.Export.Html.CssPropertiesExportType.Style
            ' Specify the root tag for export.
            options.ExportRootTag = DevExpress.XtraRichEdit.Export.Html.ExportRootTag.Body
        End If
    End Sub

Export Images

Embed Images

Enable the DXRichEditHtmlDocumentExporterOptions.EmbedImages option to embed images in an HTML file as Base64-encoded data.

Specify External Image Location

Method 1

Use the DXRichEditHtmlDocumentExporterOptions.UriExportType and DXRichEditHtmlDocumentExporterOptions.TargetUri properties to specify a location for external images.

Method 2

Implement and register a custom IUriProvider. This interface contains the CreateImageUri and CreateCssUri methods that allow you to specify locations for external images and styles.

Read Tutorial: Export Document Images to HTML