与 Angular 集成
请确保您已熟悉 Angular 的基本概念和模式。如需复习，请参阅 Angular 文档。
DHTMLX RichText 可与 Angular 配合使用。完整的代码示例请参见 GitHub 演示。
创建项目
在创建新项目之前，请先安装 Angular CLI 和 Node.js。
使用 Angular CLI 创建一个名为 my-angular-richtext-app 的新项目：
ng new my-angular-richtext-app
在项目创建过程中，当 Angular CLI 提示时，请禁用服务端渲染（SSR）和静态站点生成（SSG/Prerendering）。
该命令会安装所有必要的工具，无需执行其他命令。
安装依赖
切换到新应用的目录：
cd my-angular-richtext-app
使用 yarn 包管理器安装依赖并启动开发服务器：
yarn
yarn start
应用将在 localhost 上运行（例如 http://localhost:3000）。
创建 RichText
停止应用并安装 RichText 包。
第一步：安装包
下载 RichText 试用包 并按照 README 文件中的步骤操作。试用许可证有效期为 30 天。
第二步：创建组件
创建一个 Angular 组件，将 RichText 添加到应用中。在 src/app/ 目录下，创建 richtext 文件夹，并添加一个名为 richtext.component.ts 的新文件。
导入源文件
打开 richtext.component.ts 并导入 RichText 源文件。
对于从本地文件夹安装的 PRO 版本，请使用：
import { Richtext } from 'dhx-richtext-package';
对于试用版本，请使用：
import { Richtext } from '@dhx/trial-richtext';
本教程使用 RichText 的试用版本。
设置容器并初始化 RichText
为 RichText 设置容器元素，并在 ngOnInit() 中使用 Richtext 构造函数初始化组件。在 ngOnDestroy() 中调用 destructor() 方法进行清理：
import { Richtext } from '@dhx/trial-richtext';
import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation } from '@angular/core';
@Component({
encapsulation: ViewEncapsulation.None,
selector: "richtext", // 在 app.component.ts 中以 <richtext /> 的形式使用 "richtext" 选择器
styleUrls: ["./richtext.component.css"], // 引入 css 文件
template: `<div class = "component_container">
<div #richtext_container class = "widget"></div>
</div>`
})
export class RichTextComponent implements OnInit, OnDestroy {
// RichText 的容器
@ViewChild("richtext_container", { static: true }) richtext_container!: ElementRef;
private _editor!: Richtext;
ngOnInit() {
// 初始化 RichText 组件
this._editor = new Richtext(this.richtext_container.nativeElement, {});
}
ngOnDestroy(): void {
this._editor.destructor(); // 销毁 RichText
}
}
添加样式
在 src/app/richtext/ 目录下创建 richtext.component.css 文件，为 RichText 及其容器添加样式：
/* 导入 RichText 样式 */
@import "@dhx/trial-richtext/dist/richtext.css";
/* 页面基础样式 */
html,
body{
height: 100%;
padding: 0;
margin: 0;
}
/* RichText 容器 */
.component_container {
height: 100%;
margin: 0 auto;
}
/* RichText 控件 */
.widget {
height: calc(100% - 56px);
}
加载数据
为 RichText 提供数据。在 src/app/richtext/ 目录下创建 data.ts 文件：
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 };
}
打开 richtext.component.ts，导入数据并在 ngOnInit() 中将 value 属性传递给 RichText 配置：
import { Richtext } from '@dhx/trial-richtext';
import { getData } from "./data"; // 导入数据
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(); // 从 data 模块中提取值
this._editor = new Richtext(this.richtext_container.nativeElement, {
value
// 其他配置属性
});
}
ngOnDestroy(): void {
this._editor.destructor();
}
}
或者，在 ngOnInit() 中调用 setValue() 方法向 RichText 加载数据：
import { Richtext } from '@dhx/trial-richtext';
import { getData } from "./data"; // 导入数据
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(); // 从 data 模块中提取值
this._editor = new Richtext(this.richtext_container.nativeElement, {
// 其他配置属性
});
// 通过 setValue() 方法应用数据
this._editor.setValue(value);
}
ngOnDestroy(): void {
this._editor.destructor();
}
}
RichText 组件现已准备就绪。当 <richtext/> 元素挂载时，Angular 会渲染带有数据的编辑器。完整的配置选项列表请参见 RichText API 概览。
处理事件
RichText 会在用户操作时触发事件。使用 api.on() 方法订阅事件以响应用户输入。请参见完整 的事件列表。
打开 richtext.component.ts 并更新 ngOnInit() 方法。以下示例在每次触发 print 事件时记录一条消息：
// ...
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();
}
第三步：将 RichText 添加到应用
打开 src/app/app.component.ts，将默认代码替换为 <richtext/> 选择器：
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `<richtext/>`
})
export class AppComponent {
name = "";
}
创建 src/app/app.module.ts 并声明 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 {}
打开 src/main.ts 并将内容替换为引导代码：
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import { AppModule } from "./app/app.module";
platformBrowserDynamic()
.bootstrapModule(AppModule)
.catch((err) => console.error(err));
启动应用，查看 RichText 在页面上渲染并显示数据。
您现在已在 Angular 中完成了 RichText 的集成。请根据您的需求自定义代码。完整示例可在 GitHub 上获取。