FontColor

23 Sep 20251 minute to read

Configures the font color settings of the RichTextEditor.

Properties

colorCode { : }

Specifies custom color codes.

Defaults to fontColor

columns number

Specifies the number of columns in the color palette.

Defaults to 10

default string

Specifies the default font color.

Defaults to ‘#ff0000’

mode ColorModeType

Specifies the color mode.

Defaults to ‘Palette’

modeSwitcher boolean

Enables or disables the mode switcher button.

Defaults to false

showRecentColors boolean

Indicates whether the recent colors section is shown in the toolbar’s fontColor.
This property enables the section in the toolbar’s font color picker that displays the recently selected colors for quick access.
This will allow quick re-use of colors that were recently selected, saving time and improving efficiency.

import { Component } from '@angular/core';
import { ToolbarService, LinkService, RichTextEditorModule, HtmlEditorService, QuickToolbarService, ImageService, TableService } from '@syncfusion/ej2-angular-richtexteditor';

@Component({
    selector: 'app-root',
    template: "<ejs-richtexteditor [toolbarSettings]='tools' [fontColor]='fontColor'></ejs-richtexteditor>",
    providers: [ ToolbarService, HtmlEditorService, QuickToolbarService, TableService,
    LinkService, ImageService],
    standalone: true,
    imports: [RichTextEditorModule]
}) 
export class AppComponent {
    public fontColor = {
        columns: 2,
        colorCode: {
            'Custom': ['#ffff00',  '#008000', '#800080', '#800000', '#808000', '#c0c0c0', '#000000','']
        },
        showRecentColors: true,
        modeSwitcher: false
    }
    public tools = {
        items: [ 'fontColor']
    };
}

Defaults to true