将字体系列功能添加到 Angular 中的 CKEditor 工具栏

Question

遗憾的是，我无法将字体系列功能添加到 Angular 中的 CKEditor 工具栏。

我在控制台中收到以下错误：

toolbarview-item-unavailable：请求的工具栏项是 不可用。阅读更多： https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-toolbarview-item-unavailable

{name: "fontFamily"}

这是我的项目的样子：

app.module.ts

...
import { CKEditorModule } from '@ckeditor/ckeditor5-angular';
import { CkeditorComponent } from './ckeditor/ckeditor.component';
...

@NgModule( {
    declarations: [
        ...
        CkeditorComponent
    ],
    imports: [
        ...
        CKEditorModule,
        ...
    ],
    ...
} )

ckeditor.component.ts

import * as BalloonEditor from '@ckeditor/ckeditor5-build-balloon';

@Component( {
    ...
} )

export class CkeditorComponent {
    public Editor = BalloonEditor;

    public editorConfig = {
        fontFamily: {
          options: [
            'default',
            'Ubuntu, Arial, sans-serif',
            'Ubuntu Mono, Courier New, Courier, monospace'
          ]
        },
        toolbar: [
          'heading', 'bulletedList', 'numberedList', 'fontFamily'
        ]
    };
}

ckeditor.component.html

<ckeditor 
  [editor]="Editor" 
  [config]="editorConfig"
  data="<p>Hello world!</p>"></ckeditor>

Answer 1

正如我在GH issue 中回复您的那样，很遗憾，FontFamily 插件不存在于Balloon Editor 构建中。因此，您有两个选择：

1. 在 this guide 之后使用包外部的自定义插件构建一个编辑器，然后将该编辑器移动到 Angular 存储库。其余部分在Angular integration guide 中进行了描述。
2. 从these steps 之后的源代码构建编辑器。虽然第一种方法得到官方支持，但我无法告诉您从源代码构建是否可行，因为我没有花太多时间研究它及其边缘情况。
3. 使用Document Editor，其中包含FontFamily 插件。