本指南展示了如何使用 TinyMCE Angular 组件 将 TinyMCE 集成到 Angular 应用中。

前置条件

此流程需要 Node.js（以及 NPM）。

操作流程

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

    npm install -g @angular/cli

  2. 创建一个名为 tinymce-angular-demo 的新 Angular 项目。

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

  3. 导航至新创建的项目目录，并安装 tinymce 和 @tinymce/tinymce-angular。

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

  4. 创建 src/app/editor.component.ts。

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

// 确保导入 TinyMCE 以注册其他组件所需的全局变量
import 'tinymce/tinymce';
// DOM 模型
import 'tinymce/models/dom/model';
// 主题
import 'tinymce/themes/silver';
// 工具栏图标
import 'tinymce/icons/default';
// 编辑器样式
import 'tinymce/skins/ui/oxide/skin.min.css';

// 导入插件
import 'tinymce/plugins/advlist';
import 'tinymce/plugins/autolink';
import 'tinymce/plugins/link';
import 'tinymce/plugins/image';
import 'tinymce/plugins/lists';
import 'tinymce/plugins/table';
import 'tinymce/plugins/code';
import 'tinymce/plugins/help';
// 包含插件在运行时懒加载的资源
import 'tinymce/plugins/help/js/i18n/keynav/en.js';
import 'tinymce/plugins/wordcount';

// 内容样式，包括像假光标这样的内联 UI
import 'tinymce/skins/content/default/content.js';
import 'tinymce/skins/ui/oxide/content.js';

@Component({
  selector: 'app-editor',
  standalone: true,
  imports: [EditorComponent],
  template: `
    <editor
      [init]="init"
      licenseKey="gpl"
    />
  `
})
export class MyEditorComponent {
  init: EditorComponent['init'] = {
    height: 500,
    plugins: 'advlist autolink lists link image table code help wordcount',
    toolbar: 'undo redo | blocks | bold italic | alignleft aligncenter alignright | bullist numlist | help'
  };
}

  5. 打开 app.component.ts 并导入 MyEditorComponent。

    import { Component } from '@angular/core';
import { MyEditorComponent } from './editor.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [MyEditorComponent],
  template: `
    <h1>TinyMCE Angular Demo</h1>
    <app-editor />
  `
})
export class AppComponent {}

  6. 运行 Angular 开发服务器

    ng serve

其他资源