CKEditor 5は、ビルドを使用する準備ができているエディタと、CDEditor 5フレームワークによって構築されます.
現時点では、ckeditor 5をビルドするだけでアングルをサポートしています.ソースから構築されたckeditor 5の統合は、Webpackの設定を角度CLIで調整する能力がないためにまだ可能ではありません.

While there is no support to integrate CKEditor 5 from source yet, you can still create a custom build of CKEditor 5 and include it in your Angular application.

クイックスタート

既存の角プロジェクトでは、ckeditor npmパッケージをインストールします

npm install --save @ckeditor/ckeditor5-angular

@ ckeditor/ckeditor 5ビルドクラシックを選んだとします

npm install --save @ckeditor/ckeditor5-build-classic

次に、ckeditormoduleをコンポーネントに追加し、そのコンポーネントを使用してモジュール内のコンポーネントを使用します.

import { CKEditorModule } from '@ckeditor/ckeditor5-angular';

@NgModule( {
    imports: [
        CKEditorModule,
        // ...
    ],
    // ...
} )

エディタを角コンポーネントでインポートし、パブリックプロパティに割り当ててテンプレートからアクセスできるようにします.

import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';

@Component( {
    // ...
} )
export class MyComponent {
    public Editor = ClassicEditor;
    // ...
}

最後に、HTMLテンプレートでタグを使用してリッチテキストエディタを実行します.

<ckeditor [editor]="Editor" data="<p>Hello, world!</p>"></ckeditor>

NGModelとの統合

エディタで共有するコンポーネントを作成します

@Component( {
    // ...
} )
export class MyComponent {
    public model = {
        editorData: '<p>Hello, world!</p>'
    };
    // ...
}

テンプレートでモデルを使用して2種類のデータバインドを有効にします.

<ckeditor [(ngModel)]="model.editorData" [editor]="Editor"></ckeditor>

サポート@入力プロパティ

Editor ( required ) :
エディタのインスタンスを作成するためにstatic create ()メソッドを提供するエディタ

<ckeditor [editor]="Editor"></ckeditor>

Config :

<ckeditor [config]="{ toolbar: [ 'heading', '|', 'bold', 'italic' ] }" ></ckeditor>

Data :

<ckeditor data="<p>Hello, world!</p>" ></ckeditor>

or

@Component( {
    // ...
} )
export class MyComponent {
    public editorData = '<p>Hello, world!</p>';
    // ...
}

<ckeditor [data]="editorData" ></ckeditor>

サポート@出力プロパティ

Change :
エディタとCKEditor 5を含んでいるオブジェクトで、それは発射されますchange:data イベントオブジェクト.

<ckeditor [editor]="Editor" (change)="onChange($event)"></ckeditor>

import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import { ChangeEvent } from '@ckeditor/ckeditor5-angular/ckeditor.component';

@Component( {
    // ...
} )
export class MyComponent {
    public Editor = ClassicEditor;

    public onChange( { editor }: ChangeEvent ) {
        const data = editor.getData();

        console.log( data );
    }
    ...
}

プレースホルダの設定

<ckeditor [config]="{placeholder: 'Type the content here!' }" ></ckeditor>

エディタインスタンスへのアクセス

テンプレートリファレンス変数を作成するには#editor コンポーネントのポインティング

<ckeditor #editor [editor]="Editor"></ckeditor>

その後、<ckeditor> プロパティを使用してコンポーネントを@ViewChild( 'editor' ) 必要に応じてエディタインスタンスにアクセスします.

@Component()
export class MyComponent {
    @ViewChild( 'editor' ) editorComponent: CKEditorComponent;

    public getEditor() {
        // Warning: This may return "undefined" if the editor is hidden behind the `*ngIf` directive or
        // if the editor is not fully initialised yet.
        return this.editorComponent.editorInstance;
    }
}

私たちのブログを読んでくれたおかげで、リッチテキストエディターをアングルで追加することができます。詳細についてはCkditor角を読んでください。