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:

Property	Description
SelectedTextDecorations	Gets or sets the TextDecorations applied to the selected/typed text. This is a bindable property.
SelectedTextFontAttributes	Gets or sets the font attributes of the text that is selected/typed text. This is a bindable property.
SelectedTextFontFamily	Gets or sets the font family of the text that is selected/typed text. This is a bindable property.
SelectedTextFontSize	Gets or sets the font size of the text that is selected/typed text. This is a bindable property.

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:

Command	Description
InsertTableColumnLeft	Gets the command that inserts the table column to the left of the caret position.
InsertTableColumnRight	Gets the command that inserts the table column to the right of the caret position.
InsertTableRowAbove	Gets the command that inserts the table column to the above the caret position.
InsertTableRowBelow	Gets the command that inserts the table column below the caret position.
DeleteTableColumn	Gets the command that removes the table column that is under the caret.
DeleteTableRow	Gets the command that removes the table row that is under the caret.

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 Content

This topic describes how to select the displayed content.

Create a Custom Toolbar

This topic describes how to create a custom DXToolbar.