Using the OpenTiny package with the Angular framework

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

For examples of the OpenTiny 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 and tinymce-angular packages and save them to your package.json with --save.
```
npm install --save tinymce @tinymce/tinymce-angular
```

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

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { EditorModule } from '@tinymce/tinymce-angular';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    EditorModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

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

<h1>OpenTiny 6 Angular Demo</h1>
<editor
  [init]="{ plugins: 'lists link image table code help wordcount' }"
></editor>

Using a text editor; open angular.json and add OpenTiny to the assets property.

"assets": [
  { "glob": "**/*", "input": "node_modules/tinymce", "output": "/tinymce/" }
]

Load OpenTiny.

To load OpenTiny when the editor is initialized (also known as lazy loading), add a dependency provider to the module using the TINYMCE_SCRIPT_SRC token.

import { EditorModule, TINYMCE_SCRIPT_SRC } from '@tinymce/tinymce-angular';
/* ... */
@NgModule({
  /* ... */
  imports: [
    EditorModule
  ],
  providers: [
    { provide: TINYMCE_SCRIPT_SRC, useValue: 'tinymce/tinymce.min.js' }
  ]
})

To load OpenTiny when the page or application is loaded:

Open angular.json and add OpenTiny to the global scripts tag.
```
"scripts": [
  "node_modules/tinymce/tinymce.min.js"
]
```

Update the editor configuration to include the base_url and suffix options.

<editor [init]="{
  base_url: '/tinymce', // Root for resources
  suffix: '.min'        // Suffix to use when loading resources
}"></editor>

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.

Bundling OpenTiny with an Angular application

Tiny does not recommend bundling tinymce and tinymce-angular with a module loader. Bundling these packages can be complex and error prone.

To bundle OpenTiny 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 OpenTiny-related imports.

Example of bundling:

/* Add the tinymce-angular wrapper to the bundle */
import { Editor } from '@tinymce/tinymce-angular';
/* For instructions on bundling OpenTiny, see the Bundling OpenTiny documentation. */

For instructions on bundling OpenTiny, see: Bundling OpenTiny.

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 and serving 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.

Next Steps

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