Как добавить плагины в CKEditor для Angular "@ ckeditor / ckeditor5-angular"?

Question

Я установил CKEditor для 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;
}

Наконец, я использую тег ckeditor в своем html-шаблоне:

<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: Невозможно прочитать свойство '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#adding-a-plugin-to-a-build

Добавление плагинов к существующим сборкам осуществляется через их настройку. Сборки редактора поддерживаются в соответствующих репозиториях GitHub. Поэтому, предполагая, что вы хотите настроить классический редактор Построить нужно:

• Клонировать репозиторий сборки.
• Установите пакет плагинов.
• Добавьте его в конфигурацию сборки.
• Связать сборку.

Мы должны создать «пользовательскую сборку», а затем импортировать ее в наш компонент.