Éditeur de texte enrichi en Angular

Nous présenterons comment créer un éditeur de texte enrichi dans Angular et quelles bibliothèques nous pouvons en créer une.

Utilisez la bibliothèque Angular-Editor pour créer un éditeur de texte enrichi dans Angular

Lors de la création d’un système de gestion de contenu ou de tout logiciel Web nécessitant la fonctionnalité permettant aux utilisateurs de modifier le contenu, nous avons deux options : utiliser du texte brut ou créer un éditeur de texte enrichi. Un éditeur de texte enrichi est utilisé pour formater le texte à l’aide des nombreuses options dont il dispose.

Nous pouvons ajouter des images, des liens, de l’audio et des vidéos qui seront convertis en contenu HTML.

Il existe de nombreuses bibliothèques dans Angular qui peuvent nous aider à intégrer un éditeur de texte enrichi dans notre application Web, telles que Angular-Editor, Angular Trix, Angular Meditor, ngQuill et Angular inline text editor.

La bibliothèque que nous allons utiliser pour créer un éditeur de texte enrichi est @kolkov/angular-editor. Nous pouvons installer @kolkov/angular-editor en utilisant le gestionnaire de paquets npm.

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

Une fois installé, nous devons importer HttpClientModule de @angular/common/http et AngularEditorModule de @kolkov/angular-editor dans app.module.ts.

Notre app.module.ts ressemblera à ci-dessous.

# 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 { }

Nous pouvons maintenant configurer notre éditeur de texte enrichi en utilisant AngularEditorConfig. Nous pouvons faire les configurations suivantes.

En utilisant les configurations ci-dessus, nous allons configurer notre éditeur de texte enrichi.

# 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',
      },
    ],
  };
}

Nous allons créer un modèle en utilisant la balise angular-editor pour afficher notre éditeur de texte enrichi et la sortie de notre éditeur de texte enrichi ; nous allons utiliser la variable htmlContent, que nous avons définie dans app.component.ts.

Notre code dans app.component.html ressemblera à ci-dessous.

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

Production:

De cette manière simple, nous pouvons créer un éditeur de texte enrichi.