Search results

Styling

Font name and size

By default, the editor is initialized with font name and font size as null. 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.

Font name

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

Default Key Default Value
Font name null
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’ }

Font size

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 null
Width 35px.
Items { Text: ‘8 pt’, Value: ‘8pt’ },{ Text: ‘10 pt’, Value: ‘10pt’ },{ Text: ‘12 pt’, Value: ‘12pt’ },{ Text: ‘14 pt’, Value: ‘14pt’ },{ Text: ‘18 pt’, Value: ‘18pt’ },{ Text: ‘24 pt, Value: ‘24pt’ },{ Text: ‘36 pt’, Value: ‘36pt’ }.

The following sample demonstrates the option to add the font name and font size tools to the toolbar as well as modify the default Width of the tools.

@using Syncfusion.EJ2.Blazor
@using Syncfusion.EJ2.Blazor.RichTextEditor

<EjsRichTextEditor FontSize="@FontSize" FontFamily="@FontFamily">
    <RichTextEditorToolbarSettings Items="@Tools"></RichTextEditorToolbarSettings>
    <p>The RichTextEditor component is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.</p>
    <p><b> Key features:</b></p>
    <ul>
    <li><p> Provides <b>IFRAME</b> and <b>DIV</b> modes </p></li>
    <li><p> Capable of handling markdown editing.</p></li>
    <li><p> Contains a modular library to load the necessary functionality on demand.</p></li>
    <li><p> Provides a fully customizable toolbar.</p></li>
    <li><p> Provides HTML view to edit the source directly for developers.</p></li>
    <li><p> Supports third - party library integration.</p></li>
    </ul>
</EjsRichTextEditor>

@code {
    public object[] Tools = new object[] {
        "Bold", "Italic", "Underline", "FontName", "FontSize", "FontColor", "BackgroundColor", "|",
        "Formats", "Alignments", "|", "CreateLink", "Image", "|","SourceCode", "|", "Undo", "Redo"
    };
    public RichTextEditorFontFamily FontFamily = new RichTextEditorFontFamily { Width = "50px" };
    public RichTextEditorFontSize FontSize = new RichTextEditorFontSize{ Width = "50px" };
}

The output will be as follows.

Font Size

Custom font and size

RichTextEditor provides support to custom fonts 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.

@using Syncfusion.EJ2.Blazor
@using Syncfusion.EJ2.Blazor.RichTextEditor

<EjsRichTextEditor>
        <RichTextEditorToolbarSettings Items="@Tools"></RichTextEditorToolbarSettings>
        <RichTextEditorFontFamily Width="50px" Items="@FontItems"></RichTextEditorFontFamily>
        <RichTextEditorFontSize Width="50px" Items="@FontSizeItems" ></RichTextEditorFontSize>
        <p>The RichTextEditor component is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.</p>
        <p><b> Key features:</b></p>
        <ul>
            <li><p> Provides <b>IFRAME</b> and <b>DIV</b> modes </p></li>
            <li><p> Capable of handling markdown editing.</p></li>
            <li><p> Contains a modular library to load the necessary functionality on demand.</p></li>
            <li><p> Provides a fully customizable toolbar.</p></li>
            <li><p> Provides HTML view to edit the source directly for developers.</p></li>
            <li><p> Supports third - party library integration.</p></li>
        </ul>
</EjsRichTextEditor>

@code {
    public object[] Tools = new object[] {
        "Bold", "Italic", "Underline", "FontName", "FontSize", "FontColor", "BackgroundColor", "|",
        "Formats", "Alignments", "|", "CreateLink", "Image", "|","SourceCode", "|", "Undo", "Redo"
    };
    public List<IDropDownItemModel> FontItems = new List<IDropDownItemModel>() {
        new IDropDownItemModel() { text = "Segoe UI", value = "Arial,Helvetica,sans-serif" },
        new IDropDownItemModel() { text = "Arial", value = "Roboto" },
        new IDropDownItemModel() { text = "Courier New", value = "Courier New,Courier,monospace"},
        new IDropDownItemModel() { text = "Georgia", value = "Georgia,serif" },
        new IDropDownItemModel() { text = "Impact", value = "Impact,Charcoal,sans-serif" },
        new IDropDownItemModel() { text = "Calibri Light", value = "CalibriLight" }
    };
    public List<IDropDownItemModel> FontSizeItems = new List<IDropDownItemModel>() {
        new IDropDownItemModel() { text = "8 pt", value = "8pt" },
        new IDropDownItemModel() { text = "10 pt", value = "10pt" },
        new IDropDownItemModel() { text = "12 pt", value = "12pt"},
        new IDropDownItemModel() { text = "14 pt", value = "14pt" },
        new IDropDownItemModel() { text = "42 pt", value = "42pt" }
    };
    public class IDropDownItemModel
    {
        public string text { get; set; }
        public string value { get; set; }
    }
}

The output will be as follows.

Custom Fonts

Custom Font size

Font and Background color

To apply font color or background color for a selected content of RTE, use the 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.

The FontColor and BackgroundColor property has two Mode Picker and Palette. Palette mode has predefined set of ColorCode and in the picker mode, more colors has been provided. Through ModeSwitcher, you can able to switch between these two options.

@using Syncfusion.EJ2.Blazor
@using Syncfusion.EJ2.Blazor.RichTextEditor

<EjsRichTextEditor BackgroundColor="@BackgroundColor" FontColor="@FontColor">
    <RichTextEditorToolbarSettings Items="@Tools"></RichTextEditorToolbarSettings>
    <p>The RichTextEditor component is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.</p>
    <p><b> Key features:</b></p>
    <ul>
    <li><p> Provides <b>IFRAME</b> and <b>DIV</b> modes </p></li>
    <li><p> Capable of handling markdown editing.</p></li>
    <li><p> Contains a modular library to load the necessary functionality on demand.</p></li>
    <li><p> Provides a fully customizable toolbar.</p></li>
    <li><p> Provides HTML view to edit the source directly for developers.</p></li>
    <li><p> Supports third - party library integration.</p></li>
    </ul>
</EjsRichTextEditor>

@code {
    public object[] Tools = new object[] {
        "Bold", "Italic", "Underline", "FontName", "FontSize", "FontColor", "BackgroundColor", "|",
        "Formats", "Alignments", "|", "CreateLink", "Image", "|","SourceCode", "|", "Undo", "Redo"
    };
    public RichTextEditorBackgroundColor BackgroundColor = new RichTextEditorBackgroundColor { ModeSwitcher = true };
    public RichTextEditorFontColor FontColor = new RichTextEditorFontColor { ModeSwitcher = true };
}

The output will be as follows.

Font Color

Background Color

See Also