Angular Component Jodit WYSIWYG

• Github

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.

Installation

$ npm install jodit-angular
Copy

Usage

Loading the Component

Import the EditorModule from the npm package like so:

import { JoditAngularModule } from 'jodit-angular';
Copy

Then add it to your application module:

// Your setup might differ, but the important part is the imports array
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
JoditAngularModule // <- Crucial part
],
providers: [],
bootstrap: [AppComponent]
})
Copy

Using the Component in Your Templates You can use the editor in your templates as follows:

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

In the config, you can set all Jodit's options

Event Binding

You can bind editor events via a shorthand prop on the editor, like so:

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

The handler is called with an object containing the properties event (the event object) and editor (a reference to the editor).

License

This package is available under MIT License.