Rich-Text-Editor in Angular

Wir werden vorstellen, wie man einen Rich-Text-Editor in Angular erstellt und welche Bibliotheken wir erstellen können.

Verwenden Sie die Bibliothek Angular-Editor, um einen Rich-Text-Editor in Angular zu erstellen

Beim Erstellen eines Content-Management-Systems oder einer beliebigen Web-Software, die die Funktionalität benötigt, um Benutzern das Bearbeiten von Inhalten zu ermöglichen, haben wir zwei Möglichkeiten: Verwenden Sie einfachen Text oder erstellen Sie einen Rich-Text-Editor. Ein Rich-Text-Editor wird verwendet, um Text mit vielen verfügbaren Optionen zu formatieren.

Wir können Bilder, Links, Audio und Videos hinzufügen, die in HTML-Inhalte umgewandelt werden.

Es gibt viele Bibliotheken in Angular, die uns helfen können, einen Rich-Text-Editor in unsere Webanwendung zu integrieren, wie zum Beispiel Angular-Editor, Angular Trix, Angular Meditor, ngQuill und Angular inline text editor.

Die Bibliothek, die wir verwenden werden, um einen Rich-Text-Editor zu erstellen, ist @kolkov/angular-editor. Wir können @kolkov/angular-editor mit dem Paketmanager npm installieren.

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

Nach der Installation müssen wir HttpClientModule von @angular/common/http und AngularEditorModule von @kolkov/angular-editor in app.module.ts importieren.

Unser app.module.ts sieht wie folgt aus.

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

Jetzt können wir unseren Rich-Text-Editor mit AngularEditorConfig konfigurieren. Wir können die folgenden Konfigurationen vornehmen.

Mit den obigen Konfigurationen konfigurieren wir unseren Rich-Text-Editor.

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

Wir werden eine Vorlage mit dem Tag angular-editor erstellen, um unseren Rich-Text-Editor und die Ausgabe unseres Rich-Text-Editors anzuzeigen; Wir verwenden die Variable htmlContent, die wir in app.component.ts definiert haben.

Unser Code in app.component.html sieht wie folgt aus.

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

Ausgabe:

Auf diese einfache Weise können wir einen Rich-Text-Editor erstellen.