Styling Tools in the ASP.NET MVC Rich Text Editor Control

18 Nov 20183 minutes to read

Font family

The Rich Text Editor initializes with a default font family, which inherits the font family of the parent element. You can change the font for selected text using the font family dropdown in the toolbar. When the default font family is selected, the toolbar will display “Font Name”. However, for other font families, the toolbar will show the name of the selected font.

To apply a different font style to a specific section of the content, follow these steps:

1. Select the text you want to change.
2. Choose the desired font style from the drop-down menu in the toolbar.

These steps will apply the selected font style to the chosen text, allowing you to customize the appearance of your content easily.

Built-in font family

You can add the FontName tool in the Rich Text Editor toolbar using the toolbarSettings items property.

The Rich Text Editor comes with a pre-configured set of fontFamily property.

Custom font family

The Rich Text Editor supports providing custom fonts along with the existing list. To add additional font names to the font dropdown, you can configure the items field of the fontFamily property. This allows you to extend the available font options beyond the default selection.

Google font support

To use web fonts in Rich Text Editor, it is not needed for the web fonts to be present in local machine. To add the web fonts to Rich Text Editor, you need to refer the web font links and add the font names in the fontFamily property.

The below font style links are referred in the page.

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Great+Vibes">

NOTE

In the above sample, you can see that we have added two Google web fonts (Roboto and Great vibes) to Rich Text Editor.

Font size

The Rich Text Editor initializes with a default font size, which inherits the font size of the parent element. You can change the font for selected text using the font size dropdown in the toolbar. When the default font size is selected, the toolbar will display “Font Size”. However, for other font sizes, the toolbar will show the name of the selected font.

Built-in font size

You can add the FontSize tool in the Rich Text Editor toolbar using the toolbarSettings items property.

The Rich Text Editor includes a default set of fontSize property.

Custom font size

The Rich Text Editor supports providing custom fonts along with the existing list. To add additional font names to the font dropdown, you can configure the items field of the fontSize property. This allows you to extend the available font options beyond the default selection.

Font and background color

You can add the FontColor and BackgroundColor tool in the Rich Text Editor toolbar using the toolbarSettings items property.

Custom font and background colors

To apply font color or background color to selected content in the Rich Text Editor, use the font color and background color tools.

The Rich Text Editor offers custom font and background colors along with the existing list through the colorCode field of the fontColor and backgroundColor properties.

Both the FontColor and BackgroundColor properties offer two modes: Picker and Palette. The Palette mode provides a predefined set of colors, while the Picker mode includes a color scheme to choose custom colors. You can switch between these options using the modeSwitcher feature.

Show recent color

The ShowRecentColors feature in the Rich Text Editor allows users to quickly access a row of recently used colors displayed below the main palette. This helps streamline the editing process by making frequently used colors readily available, improving efficiency and consistency in styling.

This feature can be enabled separately for the RichTextEditorFontColor and RichTextEditorBackgroundColor tools, giving users flexibility based on their formatting needs. It’s especially useful when working with recurring color themes, as it eliminates the need to manually search through the full color palette each time.