angular 버전별 ngx-editor 사용법
안녕하세요.
이번에는 angular 19에서 ngx-editor 사용법을 알아보도록 하겠습니다.
참고로 유튜브 동영상 주소입니다 : https://youtu.be/WJ44Ufz_uh4
소스는 다음 위치에 있습니다 : https://github.com/tigersarang/angular19_ngxEditor
1. ng new ngxEditor 로 angular 프로젝트를 생성합니다.
2. cd .\ngxEditor\
3. angular19 => npm install ngx-editor@19.0.0-beta.1
angular18 => npm install ngx-editor@16
을 실행하여 ngx-editor를 설치합니다.
4. ng g c ngxEditor 을 실행하여 component를 추가합니다.
그리고 다음과 같이 프로그램을 수정합니다.
ngx-editor.component.html
<form #form="ngForm" (ngSubmit)="save()">
<button type="submit">저장</button>
<ngx-editor-menu [editor]="editor"></ngx-editor-menu>
<ngx-editor
[editor]="editor"
[(ngModel)]="content"
[ngModelOptions]="{ standalone: true }"
placeholder="내용을 입력하세요"
></ngx-editor>
</form>
ngx-editor.component.ts
import { Component, OnDestroy, OnInit } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { NgxEditorModule, Editor, Toolbar } from 'ngx-editor';
@Component({
selector: 'app-ngx-editor',
imports: [NgxEditorModule, FormsModule],
templateUrl: './ngx-editor.component.html',
styleUrl: './ngx-editor.component.css'
})
export class NgxEditorComponent implements OnInit, OnDestroy {
editor!: Editor;
toolbar: Toolbar = [
['bold', 'italic', 'underline'],
['link', 'image'],
['ordered_list', 'bullet_list'],
[{ heading: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] }],
['text_color', 'background_color'],
['align_left', 'align_center', 'align_right', 'align_justify'],
];
content: string = '';
ngOnInit(): void {
this.editor = new Editor();
}
ngOnDestroy(): void {
this.editor.destroy();
}
save() {
console.log(this.content);
}
}
전체 소스는 https://github.com/tigersarang/angular19_ngxEditor 에 있습니다.