---
title: "Bundling TinyMCE from a .zip package in Angular"
description: "A guide on bundling TinyMCE from a .zip package in an Angular application."
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/angular-zip-bundle/"
md_url: "https://www.tiny.cloud/docs/tinymce/latest/angular-zip-bundle/index.md"
version: "latest"
last_updated: "2026-01-19T04:37:32Z"
tokens: 829
---
# Bundling TinyMCE from a .zip package in Angular

This guide shows how to integrate TinyMCE from a `.zip` package in an Angular application using the [TinyMCE Angular component](https://github.com/tinymce/tinymce-angular).

## Prerequisites

This procedure requires [Node.js (and NPM)](https://nodejs.org/).

## Procedure

1. From a terminal or command prompt, install the [Angular CLI Tool](https://angular.dev/tools/cli) globally.

```sh
npm install -g @angular/cli
```
2. Create a new Angular project named `tinymce-angular-demo`.

```sh
ng new --defaults --skip-git tinymce-angular-demo
```
3. Navigate to the new project directory and `@tinymce/tinymce-angular`.

```sh
cd tinymce-angular-demo && npm install @tinymce/tinymce-angular
```
4. Unzip the content of the `tinymce/js` folder from the [TinyMCE zip](/my-account/downloads/) into the `src` folder.
5. Create `src/app/editor.component.ts` with the following:

```ts
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.js';
// Content styles, including inline UI like fake cursors
import '../tinymce/skins/content/default/content.js';
import '../tinymce/skins/ui/oxide/content.js';

// 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';
// Include resources that a plugin lazy-loads at the run-time
import '../tinymce/plugins/help/js/i18n/keynav/en.js';
import '../tinymce/plugins/wordcount';

@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. Update `app.component.ts` to import `MyEditorComponent`.

```ts
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 the Angular development server

```sh
ng serve
```

## Other resources

- For examples of the TinyMCE integration, see: [the tinymce-angular storybook](https://tinymce.github.io/tinymce-angular/).
- For guides on integrating TinyMCE premium plugins, see: [Using premium plugins](../bundling-plugins/#using-premium-plugins).
- For information on customizing:

  - TinyMCE integration, see: [Angular framework Technical Reference](../angular-ref/).
  - TinyMCE, see: [Basic setup](../basic-setup/).
  - The Angular application, see: [the Angular documentation](https://angular.dev/).