Sitelet https://editor42.com/docs/install/angular/
Skip to main content

Angular Installation

@editor42/editor42-angular is a thin wrapper around Editor42 that makes it an Angular component. There is no account, no sign-up and no key of any kind.

Install​

npm install @editor42/editor42-angular

or for Yarn users:

yarn add @editor42/editor42-angular

Basic Setup​

The editor is a standalone component:

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ EditorComponent ],
  template: '<editor [init]="{ height: 400 }" initialValue="<p>Hello from Editor42</p>"></editor>'
})
export class AppComponent {}

With no extra inputs the editor script is loaded from https://cdn.editor42.com on the latest channel. That pointer only ever moves for security and bug-fix releases, because the Editor42 major version is fixed forever.

EditorModule is exported as well, for applications that are still organised in NgModules.

Reading and Writing the Content​

The component implements ControlValueAccessor, so it works with both forms APIs:

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ EditorComponent, FormsModule ],
  template: '<editor [(ngModel)]="content" [init]="{ height: 400 }"></editor>'
})
export class AppComponent {
  content = '<p>Hello from Editor42</p>';
}

Self-Hosting​

Provide the full script URL through dependency injection:

import { EDITOR42_SCRIPT_SRC } from '@editor42/editor42-angular';

providers: [
  { provide: EDITOR42_SCRIPT_SRC, useValue: '/js/editor42/editor42.min.js' }
]

Pinning a Version​

<editor channel="42.0.0"></editor>

channel accepts latest, a latest-N alias, or an exact version.

Editor Options​

Everything else is an Editor42 option, passed through the init input:

<editor [init]="{ height: 400, menubar: false, plugins: 'lists link' }"></editor>

See the Configuration Options for the full list.

Migrating from @tinymce/tinymce-angular​

npm uninstall @tinymce/tinymce-angular
npm install @editor42/editor42-angular

Change the import to @editor42/editor42-angular and you are done. Input, output and component names are unchanged. The TINYMCE_SCRIPT_SRC injection token still works as a deprecated alias of EDITOR42_SCRIPT_SRC (the Editor42 token wins when both are provided), and cloudChannel remains as a deprecated alias of channel.

All API-key and licence-key handling has been removed. The corresponding inputs are still accepted so existing code compiles, but they do nothing: no key is read, stored or sent anywhere, and no request ever reaches a vendor cloud.

The component also drives a stock TinyMCE if that is what is already loaded on the page, which keeps the switch reversible.

See the migration guide for the editor side of the move.

Live Demo​

See it running, with its full source: the Angular demo.