Angular setup

Redactor works with Angular. Follow these steps to add it to your app. The counter plugin is included only as an example of how to load and enable a plugin — replace it with any plugins you need.

Don't forget to add Redactor itself (CSS, JS, and plugins) to your application, for example in src/redactor/:

src/redactor/
  redactor.css
  redactor.min.js
  plugins/
    counter/
      counter.min.js

Step 1: Create a RedactorComponent#

In your project folder:

ng generate component redactor

Step 2: Edit the component template#

Open redactor.component.html and add a host element. A textarea is the simplest host for Angular — Redactor leaves it in place and builds the UI next to it:

<!-- redactor.component.html -->
<div class="redactor-container">
    <textarea id="entry"></textarea>
</div>

Step 3: Edit the component class#

Replace redactor.component.ts with the following. The editor is created in ngAfterViewInit and destroyed in ngOnDestroy. Enable the counter plugin with plugins: ['counter'] (the plugin script is loaded in Step 5):

// redactor.component.ts
import { Component, AfterViewInit, OnDestroy } from '@angular/core';

declare let Redactor: any;

@Component({
    selector: 'redactor',
    templateUrl: './redactor.component.html',
    styleUrl: './redactor.component.css'
})
export class RedactorComponent implements AfterViewInit, OnDestroy {
    private app: any;

    ngAfterViewInit(): void {
        this.app = Redactor('#entry', {
            content: '<p>Hello from Angular</p>',
            plugins: ['counter']
        });
    }

    ngOnDestroy(): void {
        this.app?.destroy();
        this.app = null;
    }
}

Pass any other settings in the second argument, as described in the rest of the documentation.

Step 4: Use RedactorComponent in AppComponent#

Import the component and insert the redactor selector into the app template.

// app.component.ts
import { Component } from '@angular/core';
import { RedactorComponent } from './redactor/redactor.component';

@Component({
    selector: 'app-root',
    imports: [RedactorComponent],
    templateUrl: './app.component.html',
    styleUrl: './app.component.css'
})
export class AppComponent {
    title = 'My app';
}

<!-- app.component.html -->
<div>
    <h1>Welcome to !</h1>
    <redactor></redactor>
</div>

Step 5: Edit angular.json#

Load Redactor styles and scripts (core then plugins) in angular.json, or link them from index.html:

"styles": [
    "src/redactor/redactor.css",
    "src/styles.css"
],
"scripts": [
    "src/redactor/redactor.min.js",
    "src/redactor/plugins/counter/counter.min.js"
]

Script order matters: Redactor core first, then each plugin. Plugin files call Redactor.addPlugin when they load.

Step 6: NgModule apps (optional)#

If your project still uses NgModule instead of standalone components, declare RedactorComponent in app.module.ts and set standalone: false on the component (or omit the standalone field on older Angular versions):

// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { RedactorComponent } from './redactor/redactor.component';

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

Step 7: Launch the application#

ng serve

Open the URL the CLI prints (usually http://localhost:4200). You should see the editor and the counter in the statusbar (words / characters).