BackgroundColorModel

23 Sep 20251 minute to read

Interface for a class BackgroundColor

Properties

colorCode { : }

Specifies custom color codes.

columns number

Specifies the number of columns in the color palette.

default string

Specifies the default background color.

mode ColorModeType

Specifies the color mode.

modeSwitcher boolean

Enables or disables the mode switcher button.

showRecentColors boolean

Indicates whether the recent colors section is shown in the toolbar’s backgroundColor.
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' [backgroundColor]='backgroundColor' ></ejs-richtexteditor>",
    providers: [ ToolbarService, HtmlEditorService, QuickToolbarService, TableService,
    LinkService, ImageService],
    standalone: true,
    imports: [RichTextEditorModule]
})
export class AppComponent {
    public backgroundColor: BackgroundColorModel = { columns: 2, colorCode: { 'Custom': ['#ffff00',  '#008000', '#800080', '#800000', '#808000', '#c0c0c0', '#000000','']}, showRecentColors: true, modeSwitcher: false };
    public tools = {
        items: [ 'BackgroundColor' ]
    };
}