如何为角“@ CKEditor /ckeditor 5-角”向ckeditor添加插件？

Question

我安装了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

例如，我试图安装对齐插件：

npm安装--保存@ckeditor/ckeditor 5-对齐

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

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

ClassicEditor.builtinPlugins = [
  Alignment
];

当我这样做的时候，我总是犯一个错误：

TypeError:无法读取属性'getAttribute‘的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中所解释的那样

向现有构建添加插件是通过他们的定制完成的。编辑器构建在各自的GitHub存储库中进行维护。因此，假设您希望自定义经典编辑器构建，则需要：

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

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

Answer 2

看看添加MathType插件的例子，您可以为您的案例https://stackoverflow.com/a/59225002/6465520做同样的操作。