BackgroundColor

23 Sep 20251 minute to read

Configures the background color settings of the RichTextEditor.

Properties

colorCode { : }

Specifies custom color codes.

Defaults to backgroundColor

columns number

Specifies the number of columns in the color palette.

Defaults to 10

default string

Specifies the default background color.

Defaults to ‘#ffff00’

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 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' ]
    };
}

Defaults to true