Jodit Angular Component

Angular wrapper for the Jodit WYSIWYG editor.

npm install jodit-angular jodit

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { JoditAngularComponent } from 'jodit-angular';

@Component({
  selector: 'app-root',
  imports: [JoditAngularComponent, FormsModule],
  template: `<jodit-editor [(ngModel)]="content" [config]="config" />`,
})
export class App {
  content = '<p>Hello world</p>';
  config = { height: 300 };
}

import { JoditAngularModule } from 'jodit-angular';

@NgModule({
  imports: [BrowserModule, FormsModule, JoditAngularModule],
})
export class AppModule {}

<jodit-editor [formControl]="control" />

disabled state of the control toggles Jodit read-only mode, including when it is set before the editor is created.

Jodit picks a toolbar layout by editor width, so to override buttons for every size set buttons, buttonsMD, buttonsSM and buttonsXS together.

<jodit-editor (onReady)="editor = $event" (onChange)="handle($event)" />

onReady emits the Jodit instance once it is created. Every other output emits { args, editor }, where args are the arguments Jodit passed to the event:

onChange, onBeforeEnter, onKeydown, onMousedown, onClick, onFocus, onBlur, onPaste, onResize, onBeforeCommand, onAfterCommand, onAfterExec, onAfterPaste, onChangeSelection.

Handlers are only attached to Jodit for outputs you actually bind, so unused events cost nothing.

@ViewChild(JoditAngularComponent) joditComponent!: JoditAngularComponent;

ngAfterViewInit() {
  // may still be null right after view init, prefer (onReady)
  this.joditComponent.editor?.s.insertHTML('<b>hi</b>');
}

The component bundles jodit/es2021/jodit.min.css with ViewEncapsulation.None, so no extra setup is required. To use another theme or build, add it to styles in angular.json.

Jodit is imported lazily from the jodit package. To use your own bundle, Jodit PRO or a pre-configured Jodit class, provide it through JODIT_CLASS:

import { JODIT_CLASS } from 'jodit-angular';
import { Jodit } from 'jodit-pro';

bootstrapApplication(App, {
  providers: [{ provide: JODIT_CLASS, useValue: Jodit }],
});

Nothing from Jodit is evaluated on the server. The editor is created in the browser after the first render, so Angular Universal and prerendering work out of the box.

npm ci
npm start          # demo app with the library linked from dist/
npm test           # karma + ChromeHeadless
npm run build      # builds dist/jodit-angular

Library sources live in projects/jodit-angular, the demo in projects/demo.

Releases are built and published by GitHub Actions when a version tag is pushed. The main branch is protected, so the bump is done locally by a maintainer:

npm version patch   # bumps both package.json files, updates CHANGELOG, commits and tags
git push --follow-tags origin main

The release.yml workflow runs tests, publishes dist/jodit-angular to npm through OIDC trusted publishing and creates a GitHub release from CHANGELOG.md.

MIT