Load and Retrieve Content

• Apr 19, 2024
• 3 minutes to read

Important

The HTML Edit control does not support CSP. To minimize security-related risks, you should always sanitize untrusted raw HTML content (passed from potentially unsafe sources).

Note: End users cannot inject malicious content using the HTML Edit control’s user interface. As such you only need to sanitize content passed to the HTML Edit control via its API.

The HTML Edit control includes APIs that allow you to specify the HTML content source in XAML and code-behind (both synchronously and asynchronously).

You can load HTML content from the following source types:

• File
• Stream
• String
• Uri

Display Content (Synchronous)

Set the HtmlEdit.HtmlSource property to the HTML content source to display it in the HTML Edit:

C#

public partial class MainPage : ContentPage {
    public MainPage() {
        InitializeComponent();
        // Loading content from file in stream
        htmledit.HtmlSource = FileSystem.Current.OpenAppPackageFileAsync("mail.html");
        // Loading content from string
        htmledit.HtmlSource = "<h2>Search Input Field</h2><p>When it comes to locating text-based items quickly, a simple search input field proves to be remarkably effective.</p>";
        // Loading content from uri
        htmledit.HtmlSource = new Uri("https://www.devexpress.com/Support/EULAs/universal.xml");
    }
}

XAML

<ContentPage ...
             xmlns:dxhtml="clr-namespace:DevExpress.Maui.HtmlEditor;assembly=DevExpress.Maui.HtmlEditor"
             xmlns:dx="clr-namespace:DevExpress.Maui.Core;assembly=DevExpress.Maui.Core">
    <dx:SafeKeyboardAreaView>
        <dxhtml:HtmlEdit x:Name="htmledit"/>
    </dx:SafeKeyboardAreaView>
</ContentPage>

Display Content (Asynchronous)

If you perform a subsequent action after specifying the source of the HTML content, call the awaitable HtmlEdit.SetHtmlSourceAsync method to load the HTML content from a source asynchronously:

C#

public partial class MainPage : ContentPage {
    public MainPage() {
        InitializeComponent();
        Init();
    }
    async void Init() {
        // Loading content from file in stream
        await htmledit.SetHtmlSourceAsync(FileSystem.Current.OpenAppPackageFileAsync("mail.html"));
        // Loading content from string
        await htmledit.SetHtmlSourceAsync("<h2>Search Input Field</h2><p>When it comes to locating text-based items quickly, a simple search input field proves to be remarkably effective.</p>");
        // Loading content from uri
        await htmledit.SetHtmlSourceAsync(new Uri("https://www.devexpress.com/Support/EULAs/universal.xml"));
        // subsequent operations
        // await htmledit.SetSelectionRangeAsync(123,10);
    }
}

Display Content (XAML)

The following code sample specifies the HtmlSource property to define HTML content sources in XAML:

XAML

<ContentPage ...
             xmlns:dxhtml="clr-namespace:DevExpress.Maui.HtmlEditor;assembly=DevExpress.Maui.HtmlEditor"
             xmlns:dx="clr-namespace:DevExpress.Maui.Core;assembly=DevExpress.Maui.Core">
    <dx:SafeKeyboardAreaView>
        <dxhtml:HtmlEdit>
        <!-- Loading content from text -->
            <dxhtml:HtmlEdit.HtmlSource>
                  <dxhtml:StringHtmlSource>
                  <![CDATA[
                    <h2>Search Input Field</h2>
<p>When it comes to locating text-based items quickly, a simple search input field proves to be remarkably effective.</p>
<img src="https://community.devexpress.com/blogs/mobile/20231004-collection-filtering/search-bar-min.png" width="40%"/>
]]>
                  </dxhtml:StringHtmlSource>
            </dxhtml:HtmlEdit.HtmlSource>
        <!-- Loading content from uri -->
            <dxhtml:HtmlEdit.HtmlSource>
                  <dxhtml:UriHtmlSource Uri="index.html" />
            </dxhtml:HtmlEdit.HtmlSource>
        </dxhtml:HtmlEdit>
    </dx:SafeKeyboardAreaView>
</ContentPage>

Display a DOCX File’s Content

You can use the DevExpress Word Processing Document API to load a DOCX file and convert it to HTML.

The following code snippet converts the mail.docx file to HTML and displays it in the HTML Edit control:

C#

public MainPage() {
        InitializeComponent();
        StartDocxLoading();
    }
async void StartDocxLoading() {
    using (var wordProcessor = new RichEditDocumentServer()) {
        wordProcessor.LoadDocument(FileSystem.Current.OpenAppPackageFileAsync("mail.docx").Result);
        await htmlEdit.SetHtmlSourceAsync(wordProcessor.HtmlText);
    }
}

View Example: Display a DOCX File Content in the HTML Edit Control

Retrieve the Displayed Content

Call the HtmlEdit.GetHtmlAsync method to get HTML markup that is displayed in the HTML Edit control:

C#

public partial class MainPage : ContentPage {
    public MainPage() {
        InitializeComponent();
        Init();
    }
    async void Init() {
       var markup = await htmledit.GetHtmlAsync();
    }
}

Next Steps

Select Content

This topic describes how to select the displayed content.

Modify Content

This topic describes how to customize the displayed content.

Create a Custom Toolbar

This topic describes how to create a custom DXToolbar.