本指南介绍如何使用 TinyMCE Angular 组件 将来自 Tiny Cloud 的 TinyMCE 集成到 Angular 应用程序中。

以下步骤使用独立组件。如果使用 Angular Modules，请参阅 Angular Modules。

先决条件

此过程需要 Node.js（和 NPM）。

操作步骤

  1. 从终端或命令提示符中，全局安装 Angular CLI 工具。

    npm install -g @angular/cli

  2. 使用默认设置且不使用 Git 初始化，创建一个名为 tinymce-angular-demo 的新 Angular 项目。

    ng new --defaults --skip-git tinymce-angular-demo

  3. 进入项目目录并安装 tinymce-angular。

    cd tinymce-angular-demo && npm install @tinymce/tinymce-angular

  4. 更新根组件 app.component.ts 以导入 EditorComponent 组件。

    import { Component } from '@angular/core';
import { EditorComponent } from '@tinymce/tinymce-angular';

@Component({
  selector: 'app-root',
  imports: [EditorComponent],
  template: `
  <h1>TinyMCE 8 Angular Demo</h1>
  <editor
    [init]="init"
    apiKey="no-api-key"
  />
  `
})
export class AppComponent {
  init: EditorComponent['init'] = {
    plugins: 'lists link image table code help wordcount'
  };
}

  5. 将 apiKey 更新为您自己的 Tiny Cloud API key。

  6. 运行 Angular 开发服务器

    ng serve

其他资源