Angular setup

Redactor can work with Angular. Here are instructions on how to do it step by step.

Step 1: Creating a RedactorComponent #

Create a new RedactorComponent using the Angular CLI in your project folder:

ng generate component redactor

Step 2: Edit RedactorComponent template #

Open the redactor.component.html file and add some basic HTML:

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

Step 3: Edit RedactorComponent #

Replace the redactor.component.ts code with the following. Of course, you can make various modifications to this code. Run the editor with the settings as described in the editor documentation.

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

declare let Redactor: any;

@Component({
  selector: 'redactor',
  templateUrl: './redactor.component.html',
  styleUrls: ['./redactor.component.css']
})
export class RedactorComponent implements AfterViewInit, OnDestroy {

  private app:any;

  ngAfterViewInit(): void {
    this.app = Redactor('#entry');
  }

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

Step 4: Using a RedactorComponent in an AppComponent #

Now insert the RedactorComponent selector (redactor) into the AppComponent template (app.component.html):

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

Step 5: Edit angular.json #

Make changes to angular.json or connect the Redactor file directly into your project's index.html.

// angular.json
"styles": [
  "src/redactor/redactor.css"
],
"scripts": [
  "src/redactor/redactor.js"
]

Step 6: Declare RedactorComponent in app.module.ts #

Declare the Redactor component in the app.module.ts of your application.

// 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'; // Make sure the path to the component is correct

@NgModule({
  declarations: [
    AppComponent,
    RedactorComponent // Declaration of RedactorComponent in the module
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 7: Launch your application #

Run your application using the Angular CLI:

ng serve