Using the TinyMCE .zip package with the Angular framework

The Official TinyMCE Angular component integrates TinyMCE into Angular projects. This procedure creates a basic Angular application containing a TinyMCE editor.

This procedure uses standalone components. If using Angular Modules, see Angular Modules.

For examples of the TinyMCE Angular integration, visit the tinymce-angular storybook.

Prerequisites

This procedure requires Node.js (and npm).

Procedure

On a command line or command prompt, install the Angular CLI Tool package.
```
npm install -g @angular/cli
```
Create a new Angular project named tinymce-angular-demo.
```
ng new --defaults --skip-git tinymce-angular-demo
```
Change into the newly created directory.
```
cd tinymce-angular-demo
```
Install the tinymce-angular package and save it to your package.json with --save.
```
npm install --save @tinymce/tinymce-angular
```

Using a text editor, open /path/to/tinymce-angular-demo/src/app/app.component.ts and replace the contents with:

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

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

Add the tinymce global to the application by: Deploying TinyMCE independent of the Angular application, or bundling TinyMCE with the Angular application.
- Deploy TinyMCE independent of the Angular application
  
  To use an independent deployment of TinyMCE, add a script to either the <head> or the end of the <body> of the HTML file, such as:
  <script src="/path/to/tinymce.min.js"></script>
- Bundling TinyMCE with the Angular application using a module loader (such as Webpack).
  Tiny does not recommend bundling tinymce and tinymce-angular with a module loader. Bundling these packages can be complex and error prone.
  
  To bundle TinyMCE using a module loader (such as Webpack, Rollup, or Browserify), import or require the tinymce package, followed by the tinymce-angular package, then the other required TinyMCE-related imports.
  
  Example of bundling:
  
  /* Add the tinymce-angular wrapper to the bundle */ import { Editor } from '@tinymce/tinymce-angular'; /* For instructions on bundling TinyMCE, see the Bundling TinyMCE documentation. */
  
  For instructions on bundling TinyMCE, see: Bundling TinyMCE.
Test the application using the Angular development server.
- To start the development server, navigate to the tinymce-angular-demo directory and run:
  ng serve --open
- To stop the development server, select on the command line or command prompt and press Ctrl+C.

Deploying the application to a HTTP server

The application will require further configuration before it can be deployed to a production environment. For information on configuring the application for deployment, see: Angular Docs - Building Angular Apps or Angular Docs - Deployment.

To deploy the application to a local HTTP Server:

Navigate to the tinymce-angular-demo directory and run:
```
ng build
```
Copy the contents of the tinymce-angular-demo/dist directory to the root directory of the web server.

The application has now been deployed on the web server.

Additional configuration is required to deploy the application outside the web server root directory, such as http://localhost:<port>/my_angular_application.

Angular Modules

EditorModule is available to import from @tinymce/tinymce-angular. Which should be included in your my.module.ts file.

import { NgModule } from '@angular/core';
import { EditorModule, TINYMCE_SCRIPT_SRC } from '@tinymce/tinymce-angular';

@NgModule({
  /* ... */
  imports: [
    EditorModule
  ],
  providers: [
    // If you're self hosting and lazy loading TinyMCE from node_modules:
    { provide: TINYMCE_SCRIPT_SRC, useValue: 'tinymce/tinymce.min.js' }
  ],
  /* ... */
})
export class MyModule {}

Next Steps

For examples of the TinyMCE integration, see: the tinymce-angular storybook.
For information on customizing:
- TinyMCE integration, see: Angular framework Technical Reference.
- TinyMCE, see: Basic setup.
- The Angular application, see: the Angular documentation.