Angular のリッチテキストエディタ

Angular でリッチテキストエディターを作成する方法と、作成できるライブラリを紹介します。

Angular で Angular-Editor ライブラリを使用してリッチテキストエディタを作成する

ユーザーがコンテンツを編集できるようにする機能を必要とするコンテンツ管理システムまたは Web ソフトウェアを作成する場合、プレーンテキストを使用するかリッチテキストエディターを作成するかの 2つのオプションがあります。リッチテキストエディタは、付属の多くのオプションを使用してテキストをフォーマットするために使用されます。

HTML コンテンツに変換される画像、リンク、オーディオ、およびビデオを追加できます。

Angular には、Angular-Editor、Angular Trix、Angular Meditor、ngQuill、Angular インラインテキストエディターなど、リッチテキストエディターを Web アプリケーションに統合するのに役立つライブラリがたくさんあります。 。

リッチテキストエディタを作成するために使用するライブラリは、@kolkov/angular-editor です。npm パッケージマネージャーを使用して、@kolkov/angular-editor をインストールできます。

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

インストール後、app.module.ts の@angular/common/http から HttpClientModule をインポートし、@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>

出力：

この簡単な方法で、リッチテキストエディタを作成できます。