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>

输出：

通过这种简单的方式，我们可以创建一个富文本编辑器。