Font Family, Size and Color in 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.

Configuring the Font Family Tool in the Toolbar

You can add the FontName tool in the Rich Text Editor toolbar using the ToolbarSettings Iems property.

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

Adding Custom Font Families

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.

Supporting Google Fonts

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.

Configuring the Font Size Tool in the Toolbar

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.

Defining Custom Font Sizes

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

Configuring the Font and Background Color Tool in the Toolbar

You can add the FontName tool in the Rich Text Editor toolbar using the ToolbarSettings Items property.

Setting 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.

See Also