时间戳

首页 > 解决方案 > 将字体系列功能添加到 Angular 中的 CKEditor 工具栏

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

问题描述

遗憾的是，我无法将字体系列功能添加到 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>

标签： angularckeditortoolbarfont-familyckeditor5

解决方案

正如我在GH 问题中回复您的那样，不幸的是，该FontFamily插件不存在于Balloon Editor构建中。因此，您有两种选择：

  1. 按照本指南在包外使用自定义插件构建一个编辑器，然后将该编辑器移动到 Angular 存储库。其余部分在Angular 集成指南中进行了描述。
  2. 按照这些步骤从源代码构建编辑器。虽然第一种方法得到官方支持，但我不能告诉你从源代码构建会起作用，因为我没有花太多时间研究它及其边缘案例。
  3. 使用 包含插件的Document Editor 。FontFamily

推荐阅读