Skip to content

angular-pm-bundle.adoc

Latest commit

 

History

History
152 lines (136 loc) · 4.51 KB

angular-pm-bundle.adoc

File metadata and controls

152 lines (136 loc) · 4.51 KB

Bundling TinyMCE with an Angular application

The Official {productname} Angular component integrates {productname} into Angular projects. This procedure creates a basic Angular application containing a bundled {productname} editor.

For examples of the {productname} Angular integration, visit the tinymce-angular storybook.

Prerequisites

This procedure requires Node.js (and NPM).

Procedure

  1. On a command line or command prompt, install the Angular CLI Tool package.

    npm install -g @angular/cli

  2. Create a new Angular project named tinymce-angular-demo.

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

  3. Change into the newly created directory.

    cd tinymce-angular-demo

  4. Install the tinymce and @tinymce/tinymce-angular packages.

    npm install tinymce @tinymce/tinymce-angular
    Note

    For information on configuring premium plugins when bundling, see: Using premium plugins.

  5. Using a text editor, create src/app/editor.component.ts and set the contents to:

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

// Ensure you import TinyMCE to register the global variable required by other components
import 'tinymce/tinymce';
// DOM model
import 'tinymce/models/dom/model';
// Theme
import 'tinymce/themes/silver';
// Toolbar icons
import 'tinymce/icons/default';
// Editor styles
import 'tinymce/skins/ui/oxide/skin.min.css';

// Import plugins
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/en.js';
import 'tinymce/plugins/wordcount';

link:partial$integrations/premium-plugins-bundling.adoc[role=include]

// Content styles, including inline UI like fake cursors
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'
  };
}

  6. Using a text editor, open src/app/app.component.ts and update it to use the editor component:

    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 {}

  7. Run ng serve to start a dev server

    ng serve

  8. Build the application for production:

    ng build

    This command creates an optimized production bundle in the dist directory.

  9. If premium plugins are included, update the licenseKey option in the editor component and include your License Key.

Next Steps