Question

我已按照以下指南安装了CKEditor for Angular：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
];

执行此操作时，我总是遇到错误：

TypeError：无法读取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

实际上，“ buildinPlugins”配置必须直接在构建而不是我们的组件中完成，如指南中所述：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

使用相同的方法

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

2 个答案: