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'を読み取れません
同じガイドに従って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'
};
実際、「builtinPlugins」構成は、ガイドで説明されているように、コンポーネントではなくビルドで直接行う必要があります。 https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/installing- plugins.html#adding-a-plugin-to-a-build
既存のビルドへのプラグインの追加は、カスタマイズによって行われます。エディタービルドは、それぞれのGitHubリポジトリで維持されます。したがって、クラシックエディタービルドをカスタマイズする場合は、次のことを行う必要があります。
- ビルドリポジトリのクローンを作成します。
- プラグインパッケージをインストールします。
- ビルド構成に追加します。
- ビルドをバンドルします。
「カスタムビルド」を作成し、コンポーネントにインポートする必要があります。
MathTypeプラグインを追加する例を見てください。あなたのケースでも同じようにできます https://stackoverflow.com/a/59225002/646552