DevExpress HTML Edit for .NET MAUI

• Mar 21, 2024
• 3 minutes to read

Note

The DevExpress .NET MAUI HTML Edit control requires a license to our Universal Subscription. Without a valid license, you cannot use this control within your .NET MAUI application.

The HtmlEdit control is a rich text editor that uses HTML as an input or output format. The built-in adaptive DXToolbar control includes commands that edit and format content.

Review our demo app on GitHub to try out HTML Edit:

View Example: DevExpress HTML Edit Control for .NET MAUI

Watch Video: Get Started With the HTML Edit Control for .NET MAUI

Add an HTML Edit to the Page

Follow the steps below to add an HTML Edit control to an application:

1. Install the DevExpress.Maui.HtmlEditor NuGet package. Refer to the following topic for more information: Get Started.
2. Reference the xmlns:dxhtml="clr-namespace:DevExpress.Maui.HtmlEditor;assembly=DevExpress.Maui.HtmlEditor" and xmlns:dx="clr-namespace:DevExpress.Maui.Core;assembly=DevExpress.Maui.Core" XML namespaces in the ContentPage section.
3. Specify the content source. Refer to the following topic for more information: Load and Retrieve Content.

The following example adds an HTML Edit control to the page and displays content from index.html:

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>
            <dxhtml:HtmlEdit.HtmlSource>
                  <dxhtml:UriHtmlEditSource Uri="index.html" />
            </dxhtml:HtmlEdit.HtmlSource>
        </dxhtml:HtmlEdit>
    </dxhtml:SafeKeyboardAreaView>
</ContentPage>

In the code snippet above, the SafeKeyboardAreaView container wraps the HTML Edit. This class decreases size of the HTML Edit when you open the device keyboard to avoid their overlap (keeps the toolbar visible). After the keyboard is hidden (for example, when the HTML Edit control is no longer focused), the HTML Edit once again occupies all available height.

The SafeKeyboardAreaView also allows you to display custom content in the device’s keyboard area to add more space for UI elements. Refer to the SafeKeyboardAreaView class remarks for more information.

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.

HTML Edit (Anatomy)

The following figure shows basic elements of the HTML Edit control:

1. A text input area where you can modify content. Refer to the Modify Content topic for more information.
2. The built-in DXToolbar control. Refer to the Create a Custom Toolbar topic for more information.
3. The built-in SafeKeyboardAreaView that displays custom content in the device’s keyboard area to add more space for UI elements.

HTML Edit Availability

Set the AllowUserInput property to false to disable editing the HTML content in the HTML Edit control’s text input area. In this case, a user can still use the built-in DXToolbar control to edit HTML content.

Set the IsReadOnly property to true to disable editing the HTML content in both text input area and the built-in DXToolbar.

Next Steps

Load and Retrieve Content

This topic describes how to load content to a HTML Edit from different sources (file, stream, and uri) and retrieve the displayed content.

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.

Related Example

View Example: DevExpress HTML Edit Control for .NET MAUI