web-dev-qa-db-ja.com

Angular "@ ckeditor / ckeditor5-angular"のプラグインをCKEditorに追加する方法？

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;
}

最後に、私の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'を読み取れません

enter image description here

同じガイドに従って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'
};

enter image description here

angularckeditor
7
118218

実際、「builtinPlugins」構成は、ガイドで説明されているように、コンポーネントではなくビルドで直接行う必要があります。 https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/installing- plugins.html＃adding-a-plugin-to-a-build

既存のビルドへのプラグインの追加は、カスタマイズによって行われます。エディタービルドは、それぞれのGitHubリポジトリで維持されます。したがって、クラシックエディタービルドをカスタマイズする場合は、次のことを行う必要があります。

  • ビルドリポジトリのクローンを作成します。
  • プラグインパッケージをインストールします。
  • ビルド構成に追加します。
  • ビルドをバンドルします。

「カスタムビルド」を作成し、コンポーネントにインポートする必要があります。

1
118218

MathTypeプラグインを追加する例を見てください。あなたのケースでも同じようにできます https://stackoverflow.com/a/59225002/646552

0
Max Vorontsov