本指南展示了如何使用 TinyMCE Angular 组件，将 TinyMCE 从 .zip 包中自行托管并懒加载到 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"
    licenseKey="gpl"
  />
  `
})
export class AppComponent {
  init: EditorComponent['init'] = {
    plugins: 'lists link image table code help wordcount'
  };
}

  5. 将 TinyMCE zip 中的 tinymce/js 文件夹内容解压到 src 文件夹。

  6. 将 TinyMCE 包含到应用中有两种选择：

    1. 使用提供的 TINYMCE_SCRIPT_SRC 依赖注入器来懒加载 TinyMCE。

      import { EditorComponent, TINYMCE_SCRIPT_SRC } from '@tinymce/tinymce-angular';

@Component({
  /* ... */
  standalone: true,
  imports: [EditorComponent],
  providers: [
    { provide: TINYMCE_SCRIPT_SRC, useValue: '/tinymce/tinymce.min.js' }
  ]
})

    2. 将 TinyMCE 的相对路径添加到 angular.json 中的 scripts 数组。

      "build": {
  "options": {
    // ... other options
    "scripts": [
      "<path_to_source_tinymce>/tinymce.min.js"
    ]
  }
}

  7. 然后更新 angular.json 以将 TinyMCE 和其他组件作为 assets 包含进来。这将使它们作为静态资源对应用程序可用。

    "assets": [
  {
    "glob": "**/*",
    "input": "<path_to_source_tinymce>/tinymce",
    "output": "/tinymce"
  }
]

  8. 更新 base_url 和 suffix 选项以配置其他组件（如 skins、icons、plugins 等）的位置。

    export class AppComponent {
  /* ... */
  init: EditorComponent['init'] = {
    /* ... */
    base_url: '/tinymce', // Root for resources
    suffix: '.min'        // Suffix to use when loading resources
  };
}

  9. 运行 Angular 开发服务器

    ng serve

其他资源