Integration mit Angular
Stellen Sie sicher, dass Sie mit den grundlegenden Angular-Konzepten und -Mustern vertraut sind. Zur Auffrischung lesen Sie die Angular-Dokumentation.
DHTMLX RichText funktioniert mit Angular. Ein vollständiges Code-Beispiel finden Sie in der GitHub-Demo.
Projekt erstellen
Installieren Sie Angular CLI und Node.js, bevor Sie ein neues Projekt erstellen.
Erstellen Sie ein neues my-angular-richtext-app-Projekt mit Angular CLI:
ng new my-angular-richtext-app
Deaktivieren Sie Server-Side Rendering (SSR) und Static Site Generation (SSG/Prerendering), wenn Sie die Angular CLI während der Projekterstellung dazu auffordert.
Der Befehl installiert alle notwendigen Tools. Es sind keine weiteren Befehle erforderlich.
Abhängigkeiten installieren
Wechseln Sie in das neue App-Verzeichnis:
cd my-angular-richtext-app
Installieren Sie die Abhängigkeiten und starten Sie den Entwicklungsserver mit dem yarn Paketmanager:
yarn
yarn start
Die App läuft auf localhost (zum Beispiel http://localhost:3000).
RichText erstellen
Beenden Sie die App und installieren Sie das RichText-Paket.
Schritt 1. Paket installieren
Laden Sie das RichText-Testpaket herunter und folgen Sie den Schritten in der README-Datei. Die Testlizenz ist 30 Tage gültig.
Schritt 2. Komponente erstellen
Erstellen Sie eine Angular-Komponente, um RichText zur Anwendung hinzuzufügen. Erstellen Sie im Verzeichnis src/app/ den Ordner richtext und fügen Sie eine neue Datei namens richtext.component.ts hinzu.
Quelldateien importieren
Öffnen Sie richtext.component.ts und importieren Sie die RichText-Quelldateien.
Für die PRO-Version, die aus einem lokalen Ordner installiert wurde, verwenden Sie:
import { Richtext } from 'dhx-richtext-package';
Für die Testversion verwenden Sie:
import { Richtext } from '@dhx/trial-richtext';
Dieses Tutorial verwendet die Testversion von RichText.
Container festlegen und RichText initialisieren
Legen Sie ein Container-Element für RichText fest und initialisieren Sie die Komponente mit dem Richtext-Konstruktor innerhalb von ngOnInit(). Rufen Sie die Methode destructor() innerhalb von ngOnDestroy() auf, um aufzuräumen:
import { Richtext } from '@dhx/trial-richtext';
import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation } from '@angular/core';
@Component({
encapsulation: ViewEncapsulation.None,
selector: "richtext", // den "richtext"-Selektor in app.component.ts als <richtext /> verwenden
styleUrls: ["./richtext.component.css"], // CSS-Datei einbinden
template: `<div class = "component_container">
<div #richtext_container class = "widget"></div>
</div>`
})
export class RichTextComponent implements OnInit, OnDestroy {
// Container für RichText
@ViewChild("richtext_container", { static: true }) richtext_container!: ElementRef;
private _editor!: Richtext;
ngOnInit() {
// RichText-Komponente initialisieren
this._editor = new Richtext(this.richtext_container.nativeElement, {});
}
ngOnDestroy(): void {
this._editor.destructor(); // RichText zerstören
}
}
Styles hinzufügen
Erstellen Sie die Datei richtext.component.css im Verzeichnis src/app/richtext/ mit den Styles für RichText und seinen Container:
/* RichText-Styles importieren */
@import "@dhx/trial-richtext/dist/richtext.css";
/* Basis-Seitenstyles */
html,
body{
height: 100%;
padding: 0;
margin: 0;
}
/* RichText-Container */
.component_container {
height: 100%;
margin: 0 auto;
}
/* RichText-Widget */
.widget {
height: calc(100% - 56px);
}
Daten laden
Stellen Sie Daten für RichText bereit. Erstellen Sie die Datei data.ts im Verzeichnis src/app/richtext/:
export function getData() {
const value = `
<h2>RichText 2.0</h2>
<p>Repository at <a href="https://git.webix.io/xbs/richtext">https://git.webix.io/xbs/richtext</a></p>
<p><img src="https://placecats.com/500/300" style={{width: '500px', height: '300px'}}></p>`;
return { value };
}
Öffnen Sie richtext.component.ts. Importieren Sie die Daten und übergeben Sie die value-Eigenschaft an die RichText-Konfiguration innerhalb von ngOnInit():
import { Richtext } from '@dhx/trial-richtext';
import { getData } from "./data"; // Daten importieren
import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation } from '@angular/core';
@Component({
encapsulation: ViewEncapsulation.None,
selector: "richtext",
styleUrls: ["./richtext.component.css"],
template: `<div class = "component_container">
<div #richtext_container class = "widget"></div>
</div>`
})
export class RichTextComponent implements OnInit, OnDestroy {
@ViewChild("richtext_container", { static: true }) richtext_container!: ElementRef;
private _editor!: Richtext;
ngOnInit() {
const { value } = getData(); // Wert aus dem Datenmodul extrahieren
this._editor = new Richtext(this.richtext_container.nativeElement, {
value
// weitere Konfigurationseigenschaften
});
}
ngOnDestroy(): void {
this._editor.destructor();
}
}
Alternativ können Sie die Methode setValue() innerhalb von ngOnInit() aufrufen, um Daten in RichText zu laden:
import { Richtext } from '@dhx/trial-richtext';
import { getData } from "./data"; // Daten importieren
import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation } from '@angular/core';
@Component({
encapsulation: ViewEncapsulation.None,
selector: "richtext",
styleUrls: ["./richtext.component.css"],
template: `<div class = "component_container">
<div #richtext_container class = "widget"></div>
</div>`
})
export class RichTextComponent implements OnInit, OnDestroy {
@ViewChild("richtext_container", { static: true }) richtext_container!: ElementRef;
private _editor!: Richtext;
ngOnInit() {
const { value } = getData(); // Wert aus dem Datenmodul extrahieren
this._editor = new Richtext(this.richtext_container.nativeElement, {
// weitere Konfigurationseigenschaften
});
// Daten über die Methode setValue() anwenden
this._editor.setValue(value);
}
ngOnDestroy(): void {
this._editor.destructor();
}
}
Die RichText-Komponente ist einsatzbereit. Angular rendert den Editor mit Daten, wenn das <richtext/>-Element eingebunden wird. Die vollständige Liste der Konfigurationsoptionen finden Sie in der RichText-API-Übersicht.
Events behandeln
RichText löst Events bei Benutzeraktionen aus. Abonnieren Sie Events mit der Methode api.on(), um auf Benutzereingaben zu reagieren. Weitere Informationen finden Sie in der vollständigen Event-Liste.
Öffnen Sie richtext.component.ts und aktualisieren Sie die Methode ngOnInit(). Das folgende Beispiel protokolliert eine Meldung bei jedem print-Event:
// ...
ngOnInit() {
this._editor = new Richtext(this.richtext_container.nativeElement, {});
this._editor.api.on("print", () => {
console.log("The document is printing");
});
}
ngOnDestroy(): void {
this._editor.destructor();
}
Schritt 3. RichText zur App hinzufügen
Öffnen Sie src/app/app.component.ts und ersetzen Sie den Standardcode durch den <richtext/>-Selektor:
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `<richtext/>`
})
export class AppComponent {
name = "";
}
Erstellen Sie src/app/app.module.ts und deklarieren Sie die RichTextComponent:
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { AppComponent } from "./app.component";
import { RichTextComponent } from "./richtext/richtext.component";
@NgModule({
declarations: [AppComponent, RichTextComponent],
imports: [BrowserModule],
bootstrap: [AppComponent]
})
export class AppModule {}
Öffnen Sie src/main.ts und ersetzen Sie den Inhalt durch den Bootstrap-Code:
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import { AppModule } from "./app/app.module";
platformBrowserDynamic()
.bootstrapModule(AppModule)
.catch((err) => console.error(err));
Starten Sie die App, um zu sehen, wie RichText mit Daten auf der Seite gerendert wird.
Sie haben jetzt eine funktionierende RichText-Integration in Angular. Passen Sie den Code an Ihre Bedürfnisse an. Ein vollständiges Beispiel ist auf GitHub verfügbar.