如何为 Angular“@ckeditor/ckeditor5-angular”添加插件到 CKEditor？

Question

我按照本指南为 Angular 安装了 CKEditor：https : //ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/angular.html

我将 CKEditorModule 导入我的模块并将其添加到我的导入中。

import { CKEditorModule } from "@ckeditor/ckeditor5-angular";

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    CKEditorModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

在我的组件中，我添加了 ClassicEditor 构建并将其分配给公共属性。

import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';

export class AppComponent {
  title = 'AngularCkeditor';
  public Editor = ClassicEditor;
}

最后我在我的 html 模板中使用了 ckeditor 标签：

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

它工作得很好！

现在我想向其中添加一些插件，但没有解释如何实现。

所以我遵循了安装插件的默认指南：https : //ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/installing-plugins.html

例如，我尝试安装 Alignment 插件：

npm install --save @ckeditor/ckeditor5-alignment

然后我将插件导入我的组件并尝试加载它。

import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment'; 

ClassicEditor.builtinPlugins = [
  Alignment
];

当我这样做时，我一直遇到错误：

类型错误：无法读取 null 的属性“getAttribute”

太奇怪了，因为我按照相同的指南编辑了CKEditor的配置，并且完美运行。

ClassicEditor.defaultConfig = {
  toolbar: {
    items: [
      'heading',
      '|',
      'alignment',
      'bold',
      'italic',
      '|',
      'bulletedList',
      'numberedList',
      '|',
      'link',
      'blockQuote',
      '|',
      'imageUpload',
      '|',
      'undo',
      'redo'
    ]
  },
  image: {
    toolbar: [
      'imageStyle:full',
      'imageStyle:side',
      '|',
      'imageTextAlternative'
    ]
  },
  language: 'en'
};

Answer 1

实际上，“builtinPlugins”配置必须直接在构建中完成，而不是我们的组件，如指南中所述：https ://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/installing-plugins.html#添加插件到构建

将插件添加到现有版本是通过自定义完成的。编辑器版本在各自的 GitHub 存储库中维护。因此，假设您想要自定义经典编辑器版本，您需要：

• 克隆构建存储库。
• 安装插件包。
• 将其添加到构建配置中。
• 捆绑构建。

我们必须创建一个“自定义构建”，然后将其导入到我们的组件中。