如何为 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 构建并将其分配给 public 属性.

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

例如我尝试安装对齐插件：

npm install --save @ckeditor/ckeditor5-alignment

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

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

ClassicEditor.builtinPlugins = [
  Alignment
];

当我这样做时，我一直卡在一个错误中：

TypeError: Cannot read property 'getAttribute' of null

这很奇怪，因为我按照相同的指南编辑 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#adding-a-plugin-to-a-build

Adding plugins to existing builds is done through their customization. Editor builds are maintained in their respective GitHub repositories. Therefore, assuming that you want to customize the classic editor build you need to:

Clone the build repository.

Install the plugin package.

Add it to the build configuration.

Bundle the build.

我们必须创建一个'custom build'，然后将其导入到我们的组件中。

Answer 2

看一下添加MathType插件的例子，你也可以按照你的情况做同样的事情

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

How to add plugins to CKEditor for Angular "@ckeditor/ckeditor5-angular"?

ckeditor

angular