[ck editor] Angular에서 ck editor는 어떻게 사용할까? (사용법)

Angular 프로젝트에서 ck editor는 어떻게 사용할까?

ck editor를 사용하면서 관련된 내용을 한글로 정리해봤다. 영어로 된 문서에 불편함을 느꼈을 사람들에게 조금이나마 도움이 되길 바란다. 자세한 내용은 아래의 공식 홈페이지의 해당 문서 링크를 참고하면 된다.

• Angular rich text editor component

들어가기 전에

ck editor에는 다양한 버전의 에디터가 준비되어있다. 하지만 이 튜토리얼은 classic버전을 기준으로 작성되었다.

설치

• 사용하길 원하는 프로젝트를 준비한다.
• 해당 프로젝트에 ck editor를 설치한다.

npm으로 설치하는 경우

npm install --save @ckeditor/ckeditor5-angular @ckeditor/ckeditor5-watchdog

이후 classic editor를 설치한다.

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

잘 설치되었는지 확인하는 방법

• 해당 프로젝트의 pakage.json파일에 아래와 같은 내용이 있는지 확인한다.

"dependencies": {
    "@ckeditor/ckeditor5-angular": "^5.0.0",
    "@ckeditor/ckeditor5-build-classic": "^36.0.0",
    "@ckeditor/ckeditor5-watchdog": "^36.0.0"
  },

사용

• 사용할 컴포넌트의 모듈에 ck editor 모듈을 삽입한다.

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

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

• 사용할 컴포넌트의 ts파일에 아래의 내용을 입력한다.

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

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

• 컴포넌트의 html파일에 editor 태그를 넣어준다.

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

참고자료

• Angular rich text editor component