Editor42 in an Angular app

When to use

When the editor is a form control in an Angular app — template-driven or reactive, it behaves like any other.

How it works

The standalone <editor> component from @editor42/editor42-angular, bound with [(ngModel)]. An Angular project compiles this ahead of time with the CLI; a demo page has no build step, so the same component is compiled in the browser instead — that is what the @angular/compiler and reflect-metadata imports at the top are for. Your own app needs neither.

How to start using

Install the component with npm install @editor42/editor42-angular and put <editor> in your template — it is standalone, and implements ControlValueAccessor so ngModel and reactive forms both work.

See the Angular install page for self-hosting and the move from @tinymce/tinymce-angular.

Download ZIPOpen in CodePlay

Live Demo

JavaScript

// In an Angular app this is a component file, and the CLI compiles it ahead of time:

// import {Component} from '@angular/core';
// import {FormsModule} from '@angular/forms';
// import {EditorComponent} from '@editor42/editor42-angular';
//
// @Component({
//   selector: 'app-root',
//   standalone: true,
//   imports: [EditorComponent, FormsModule],
//   template: '<editor [(ngModel)]="content" [init]="init"></editor>'
// })
// export class AppComponent { ... }

// A demo page has no build step, so Angular compiles the same component in the browser instead:
// @angular/compiler is loaded, reflect-metadata lets it read constructor types, and the decorator
// is applied as the plain function it is.

import 'reflect-metadata';
import 'zone.js';
import '@angular/compiler';
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {bootstrapApplication} from '@angular/platform-browser';
import {EditorComponent} from '@editor42/editor42-angular';

class AppComponent {
  content = `
<h2>Editor42 in an Angular app</h2>
<p>This is the <code>&lt;editor&gt;</code> component from <code>@editor42/editor42-angular</code>. It implements <code>ControlValueAccessor</code>, so it works with <code>ngModel</code> and with reactive forms alike &mdash; here it is bound with <code>[(ngModel)]</code> and the HTML below follows as you type.</p>
<ul>
  <li><code>[init]</code> holds the Editor42 options</li>
  <li><code>[(ngModel)]</code> or a form control for the content</li>
  <li><code>EDITOR42_SCRIPT_SRC</code> if you host the editor yourself</li>
</ul>
`;

  init = {
    height: 420,
    menubar: false,
    plugins: 'lists link code',
    toolbar: 'undo redo | bold italic | bullist numlist | link code',
    content_style: 'body { font-family: Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.6; }'
  };
}

Component({
  selector: 'app-root',
  standalone: true,
  imports: [EditorComponent, FormsModule],
  template: `
    <editor [(ngModel)]="content" [init]="init"></editor>
    <h2 class="h6 mt-3">Your model, live</h2>
    <pre class="state">{{ content.trim() }}</pre>
  `
})(AppComponent);

bootstrapApplication(AppComponent);

HTML

<h1>Editor42 in Angular</h1>
<p class="hint">The <code>@editor42/editor42-angular</code> standalone component, bootstrapped in the browser.</p>

<app-root></app-root>

SASS

.hint {
  margin-bottom: 20px;
  color: var(--demo-muted-color);
}

.state {
  max-height: 160px;
  overflow: auto;
  padding: 12px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid #ddd;
  font-size: 13px;
  white-space: pre-wrap;
}