Angular 中的富文字編輯器

我們將介紹如何在 Angular 中製作富文字編輯器以及我們可以建立哪些庫。

在 Angular 中使用 Angular-Editor 庫建立富文字編輯器

在建立內容管理系統或任何需要允許使用者編輯內容的功能的 Web 軟體時，我們有兩種選擇：使用純文字或製作富文字編輯器。富文字編輯器用於使用它提供的許多選項來格式化文字。

我們可以新增將轉換為 HTML 內容的影象、連結、音訊和視訊。

Angular 中有很多庫可以幫助我們在 Web 應用程式中整合富文字編輯器，例如 Angular-Editor、Angular Trix、Angular Meditor、ngQuill 和 Angular inline text editor。

我們將用來製作富文字編輯器的庫是@kolkov/angular-editor。我們可以使用 npm 包管理器安裝 @kolkov/angular-editor。

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

安裝後，我們需要從 app.module.ts 中的@angular/common/http 和@kolkov/angular-editor 中匯入 HttpClientModule 和 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>

輸出：

通過這種簡單的方式，我們可以建立一個富文字編輯器。