在Angular中为Toolbar或TextEditor创建单个配置文件

export const toolbarConfig = {
  fontStyles: ['Arial', 'Verdana', 'Times New Roman'],
  fontSizes: [12, 14, 16, 18],
  colors: ['#000000', '#ff0000', '#00ff00', '#0000ff'],
  // 其他配置项...
};

import { Component } from '@angular/core';
import { toolbarConfig } from './config';

@Component({
  selector: 'app-toolbar',
  template: `
    <toolbar [config]="toolbarConfig"></toolbar>
  `,
})
export class ToolbarComponent {
  toolbarConfig = toolbarConfig;
}

import { Component, Input } from '@angular/core';

@Component({
  selector: 'toolbar',
  template: `
    <div>
      <select [(ngModel)]="selectedFontStyle">
        <option *ngFor="let fontStyle of config.fontStyles" [value]="fontStyle">{{ fontStyle }}</option>
      </select>
      <select [(ngModel)]="selectedFontSize">
        <option *ngFor="let fontSize of config.fontSizes" [value]="fontSize">{{ fontSize }}</option>
      </select>
      <input type="color" [(ngModel)]="selectedColor">
    </div>
  `,
})
export class ToolbarComponent {
  @Input() config: any;
  selectedFontStyle: string;
  selectedFontSize: number;
  selectedColor: string;
}