Angular의 서식 있는 텍스트 편집기

Angular에서 서식 있는 텍스트 편집기를 만드는 방법과 만들 수 있는 라이브러리를 소개합니다.

Angular-Editor 라이브러리를 사용하여 Angular에서 서식 있는 텍스트 편집기 만들기

사용자가 콘텐츠를 편집할 수 있도록 하는 기능이 필요한 콘텐츠 관리 시스템 또는 웹 소프트웨어를 만들 때 일반 텍스트를 사용하거나 서식 있는 텍스트 편집기를 만드는 두 가지 옵션이 있습니다. 서식 있는 텍스트 편집기는 제공되는 많은 옵션을 사용하여 텍스트 서식을 지정하는 데 사용됩니다.

HTML 콘텐츠로 변환될 이미지, 링크, 오디오 및 비디오를 추가할 수 있습니다.

Angular에는 Angular-Editor, Angular Trix, Angular Meditor, ngQuill 및 Angular 인라인 텍스트 편집기와 같은 풍부한 텍스트 편집기를 웹 애플리케이션에 통합하는 데 도움이 되는 많은 라이브러리가 있습니다. .

리치 텍스트 편집기를 만드는 데 사용할 라이브러리는 @kolkov/angular-editor입니다. npm 패키지 관리자를 사용하여 @kolkov/angular-editor를 설치할 수 있습니다.

# CLI
npm install @kolkov/angular-editor --save

설치 후 @angular/common/http에서 HttpClientModule을 가져오고 app.module.ts의 @kolkov/angular-editor에서 AngularEditorModule을 가져와야 합니다.

app.module.ts는 아래와 같이 보일 것입니다.

# angular
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule} from '@angular/common/http';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { AngularEditorModule } from '@kolkov/angular-editor';


@NgModule({
  imports:      [ BrowserModule, FormsModule, AngularEditorModule, HttpClientModule ],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

이제 AngularEditorConfig를 사용하여 서식 있는 텍스트 편집기를 구성할 수 있습니다. 다음 구성을 만들 수 있습니다.

위의 구성을 사용하여 서식 있는 텍스트 편집기를 구성합니다.

# angular
import { Component } from '@angular/core';
import { AngularEditorConfig } from '@kolkov/angular-editor';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  name = 'Angular 6';
  htmlContent = '';

  config: AngularEditorConfig = {
    editable: true,
    spellcheck: true,
    height: '10rem',
    minHeight: '5rem',
    placeholder: 'Enter text in this rich text editor....',
    defaultParagraphSeparator: 'p',
    defaultFontName: 'Arial',
    customClasses: [
      {
        name: 'Quote',
        class: 'quoteClass',
      },
      {
        name: 'Title Heading',
        class: 'titleHead',
        tag: 'h1',
      },
    ],
  };
}

angular-editor 태그를 사용하여 서식 있는 텍스트 편집기와 서식 있는 텍스트 편집기의 출력을 표시하는 템플릿을 만듭니다. app.component.ts에서 정의한 htmlContent 변수를 사용합니다.

app.component.html의 코드는 다음과 같습니다.

# angular
<h1>AngularEditor</h1>
<angular-editor [(ngModel)]="htmlContent" [config]="config"></angular-editor>
<h1>HTML Output</h1>
<div class="html">
  {{ htmlContent }}
</div>

출력:

이 쉬운 방법으로 서식 있는 텍스트 편집기를 만들 수 있습니다.