Modify Content

• Jan 29, 2024
• 4 minutes to read

The HTML Edit control includes APIs that allow you to customize the appearance of the selected/typed text. End-users can also use it select content and customize its appearance using the built-in toolbar control.

Customize Text Decoration and Font Settings

The table below lists properties that customize text decoration and font settings for the selected text:

The following code snippet selects a text area and specifies its SelectedTextDecorations and SelectedTextFontFamily properties:

• C#

await htmledit.SetSelectionRangeAsync(0,18); 
htmledit.SelectedTextDecorations = TextDecorations.Underline;
htmledit.SelectedTextFontFamily = "Courier";

Built-In Toolbar Items

The built-in toolbar includes the following items that change text decoration and font settings for the selected/typed text:

You can also find related toolbar items in the toolbar keyboard area view:

Customize Headings

Use the SelectedTextHeadingLevel property to customize heading type of the selected/typed text.

The following code snippet selects the text region and set its SelectedTextHeadingLevel property to Heading1:

• C#

await htmledit.SetSelectionRangeAsync(0,18);
htmledit.SelectedTextHeadingLevel = HtmlHeadingLevel.Heading1;

Built-In Toolbar Items

The built-in keyboard area view includes the following commands that change heading types of the selected/typed text:

Customize Line Height and Alignment

Use SelectedTextHorizontalAlignment and SelectedTextLineHeight properties to customize height and alignment for the line that contains the caret or current text selection.

The following code changes caret position and specifies the corresponding line’s SelectedTextHorizontalAlignment and SelectedTextLineHeight properties:

• C#

await htmledit.SetSelectionRangeAsync(123, 0);
htmledit.SelectedTextLineHeight = new HtmlLineHeight(20,Unit.Points);
htmledit.SelectedTextHorizontalAlignment = HtmlTextHorizontalAlignment.Justify;

Built-In Toolbar Items

The built-in toolbar includes the following items that change height and alignment for the line that contains the caret or current selection:

You can also find related toolbar items in the toolbar keyboard area view:

Customize Indents and Lists

Use SelectedTextIndent property to customize indent for the line that contains the caret or current selection. The and SelectedTextListType property allows you to create a list.

The following code snippet selects two text regions and specifies their SelectedTextIndent and SelectedTextListType properties:

• C#

await htmledit.SetSelectionRangeAsync(108, 12);
htmledit.SelectedTextListType = HtmlListType.Bullet;

await htmledit.SetSelectionRangeAsync(125, 30);
htmledit.SelectedTextIndent = HtmlTextIndent.Indent1;
htmledit.SelectedTextListType = HtmlListType.Bullet;

Built-In Toolbar Items

The built-in toolbar includes the following items that change line indents and create lists:

You can also find related toolbar items in the toolbar keyboard area view:

Customize Text Colors

Use SelectedTextBackground and SelectedTextForeground properties to customize background and foreground colors for selected/typed text.

The following code snippet selects two text regions. It sets the first region’s SelectedTextBackground property to DarkOrange and the second region’s SelectedTextForeground property to LightGreen :

• C#

await htmledit.SetSelectionRangeAsync(0,18);
htmledit.SelectedTextForeground = Colors.DarkOrange;

await htmledit.SetSelectionRangeAsync(123,10);
htmledit.SelectedTextBackground = Colors.LightGreen;

Built-In Toolbar Items

The built-in toolbar includes the following items that change background and foreground colors for selected/typed text:

You can also find related toolbar items in the toolbar keyboard area view:

Embed Hyperlinks and Images

Use the SelectedTextHyperlink property and the InsertImageAsync method to insert hyperlinks and images into HTML content.

The code snippet below inserts a hyperlink and an image into content. The image is stored in the project’s Resources/Raw folder.

• C#

await htmledit.SetSelectionRangeAsync(123, 9);
htmledit.SelectedTextHyperlink = new HtmlHyperlink(htmledit.SelectedText, "https://dictionary.cambridge.org/dictionary/english/effective");

await Task.Delay(200);
await htmledit.SetSelectionRangeAsync(160, 0);
await htmledit.InsertImageAsync("devexpress.png");

Built-In Toolbar Items

The built-in toolbar includes the following items that insert a hyperlink or an image:

Insert and Remove Tables

Call the InsertTable command to display the TableSizeSelector control where you can pick the table size to insert into HTML content.

Call the DeleteTable command to remove the table that is under caret.

You can also use the following commands to insert/remove table rows and columns:

Built-In Toolbar Items

The built-in toolbar includes the following item that inserts tables:

When a table is selected, the following toolbar panel is displayed:

Next Steps

Select ContentThis topic describes how to select the displayed content.Create a Custom ToolbarThis topic describes how to create a custom DXToolbar.