• Home
  • Examples
  • Integrations
  • Angular Component Jodit WYSIWYG

Angular Component Jodit WYSIWYG


npm npm npm

Jodit Angular Component

This package is a wrapper around Jodit to make it easier to use in a Angular application.

for contributors

The editor component itselt is located in the jodit-angular folder and packaged into a redistributable package with the ng-packagr tool. A test app has been created with the @angular/cli. It is located in the src directory and a dev server can be started by using the npm start command.


$ npm install jodit-angular


Loading the component

Import the EditorModule from the npm package like this:

import { JoditAngularModule } from 'jodit-angular';

And add it to you application module:

// This might look different depending on how you have set up your app
// but the important part is the imports array
declarations: [
imports: [
JoditAngularModule // <- Important part
providers: [],
bootstrap: [AppComponent]

Using the component in your templates Use the editor in your templates like this:

<jodit-editor [config]="{buttons: 'bold'}"></jodit-editor>

In config you can set all Jodit's options

Event binding

You can also bind editor events via a shorthand prop on the editor, for example:

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

Where the handler gets called with an object containing the properties event, which is the event object, and editor, which is a reference to the editor.


This package is available under MIT License.