Search results

Styling

Font name and Font size

By default, the editor is initialized with Segoe UI font name and 10pt font size. To change it, select a different font name and font size from the drop-down in the editor’s toolbar.

To apply different font style for section of the content, select the text that you would like to change, and select a required font style from the drop-down to apply the changes to the selected text.

FontName DropDowns

The following table list the default font name and width of the fontFamily dropdown and available list of font names.

Default Key Default Value
font name Segoe UI
width 65px
items { text: ‘Segoe UI’, value: ‘Segoe UI’ },{ text: ‘Arial’, value: ‘Arial,Helvetica,sans-serif’ },{ text: ‘Courier New’, value: ‘Courier New,Courier,monospace’ },{ text: ‘Georgia’, value: ‘Georgia,serif’ },{ text: ‘Impact’, value: ‘Impact,Charcoal,sans-serif’ },{ text: ‘Lucida Console’, value: ‘Lucida Console,Monaco,monospace’ },{ text: ‘Tahoma’, value: ‘Tahoma,Geneva,sans-serif’ },{ text: ‘Times New Roman’, value: ‘Times New Roman,Times,serif’ },{ text: ‘Trebuchet MS’, value: ‘Trebuchet MS,Helvetica,sans-serif’ },{ text: ‘Verdana’, value: ‘Verdana,Geneva,sans-serif’ }

FontSize DropDowns

The following table list the default font size and width of the fontSize dropdown and available list of font size.

Default Key Default Value
font size 10pt.
width 35px.
items { text: ‘8’, value: ‘8pt’ },{ text: ‘10’, value: ‘10pt’ },{ text: ‘12’, value: ‘12pt’ },{ text: ‘14’, value: ‘14pt’ },{ text: ‘18’, value: ‘18pt’ },{ text: ‘24’, value: ‘24pt’ },{ text: ‘36’, value: ‘36pt’ }.

The below sample demonstrate the option to add the font name and font size tools to the toolbar as well as modify the default width of the tools.

tagHelper
<ejs-richtexteditor id="format" format="@ViewBag.width" inlineMode="@ViewBag.inlineMode" fontFamily="@ViewBag.font" value="@ViewBag.value">
    <e-richtexteditor-toolbarsettings items="@ViewBag.items"></e-richtexteditor-toolbarsettings>
</ejs-richtexteditor>

Custom fonts and size

RichTextEditor supports to provide custom font and size with existing list.

If you want to add additional font names and font sizes to font drop-down, pass the font information as JSON data to the items field of fontSize and fontFamily property.

tagHelper
<ejs-richtexteditor id="image" value="@ViewBag.value" fontFamily="@ViewBag.fontFamily" fontSize="@ViewBag.fontsize">
    <e-richtexteditor-toolbarsettings items="@ViewBag.items"></e-richtexteditor-toolbarsettings>
</ejs-richtexteditor>

Font and Background color

If you want to apply font color or background color for a selected content of RTE you can use font color and background color tools.

RichTextEditor support to provide customs font color and background color with existing list through the colorCode field of fontColor and backgroundColor.

fontColor and backgroundColor property has two mode Picker and Palette. Palette mode has predefined set of colorCode and in picker mode, we have provided with more colors. Through modeSwitcher we can able to switch between these two options.

tagHelper
<ejs-richtexteditor id="format" fontColor="@ViewBag.fontColor" backgroundColor="@ViewBag.backgroundColor" value="@ViewBag.value">
    <e-richtexteditor-toolbarsettings items="@ViewBag.items"></e-richtexteditor-toolbarsettings>
</ejs-richtexteditor>