CKEditor 5는 바로 사용할 수 있는 편집기 빌드와 빌드의 기반이 되는 CKEditor 5 프레임워크로 구성됩니다.

현재 Angular용 CKEditor 5 구성 요소는 빌드를 통해서만 CKEditor 5 통합을 지원합니다. 소스에서 빌드된 CKEditor 5 통합은 아직 angular-cli에서 webpack 구성을 조정하는 기능이 없기 때문에 불가능합니다.

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.

빠른 시작

기존 Angular 프로젝트에서 CKEditor npm 패키지를 설치합니다.

npm install --save @ckeditor/ckeditor5-angular

@ckeditor/ckeditor5-build-classic을 선택했다고 가정합니다.

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

이제 구성 요소가 템플릿에서 구성 요소를 사용할 모듈에 CKEditorModule을 추가합니다.

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

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

Angular 구성 요소에서 편집기 빌드를 가져오고 공용 속성에 할당하여 템플릿에서 액세스할 수 있도록 합니다.

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>'
    };
    // ...
}

템플릿의 모델을 사용하여 양방향 데이터 바인딩을 활성화합니다.

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

지원되는 @Input 속성

Editor ( required ) :

편집기의 인스턴스를 생성하기 위해 정적 create() 메서드를 제공하는 편집기:

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

Config :

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

Data :

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

또는

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

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

지원되는 @Output 속성

Change :

편집기 및 CKEditor 5change: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;
    }
}

Angular에서 리치 텍스트 편집기를 추가하는 방법에 대한 제 블로그를 읽어 주셔서 감사합니다. 자세한 공식 문서는 CKEditor Angular를 참조하세요.