angular-pm-bundle.adoc

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

   partial$integrations/premium-plugins-install-step-link.adoc

   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';
   
   // TinyMCE so the global var exists
   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/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,
       menubar: false,
       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

   The development server will automatically bundle your application, including TinyMCE, when you access it in your browser. The bundler processes all the import statements and includes the {productname} modules in the development bundle.

8. Build the application for production:

   ng build

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

9. Update the licenseKey option in the editor component and include your License Key.

Next Steps

• For information on bundling, see: introduction-to-bundling-tinymce.adoc

• For examples of the {productname} integration, see: the tinymce-angular storybook.

• For information on customizing:

  • {productname} integration, see: Angular framework Technical Reference.

  • {productname}, see: Basic setup.

  • The Angular application, see: the Angular documentation.

• For a complete example, see: the Angular bundling example repository.