ngx-jodit-pro

ngx-jodit-pro v1.x

Third-party Angular wrapper for Jodit PRO WYSIWYG editor. It supports Angular >= 12. You need a license key in order to use this wrapper. Buy here.

Third-party-package

This is a third-party package with no affiliation to Jodit. See License.

License

This package does not contain the source code of Jodit Pro. You have to install it as described here (scroll down). This wrapper is licensed under MIT License, Jodit Pro is licensed seperately (see license).

Compatibility table

Ngx-jodit-pro	Jodit Pro	Angular	Type
	v1.x	>= v12	Module	more information
	v2.x	>= v12	Module	more information
	v2.x	>= v16	Standalone	more information

Demo

The demo for ngx-jodit-pro is not available. You can find a demo of ngx-jodit (not Pro!) here.

Installation

1. Make sure that jodit@^3 is installed (v4 is still in beta and supported only with ngx-jodit >= v2, see compatibility table):

   npm install jodit@^3 jodit-pro@^1 --save
   

   jodit@^3 is needed for typings.

2. npm install ngx-jodit-pro --save
   

3. Add node_modules/jodit-pro/build/jodit.css to your app's styles in angular.json (or project.json for Nx):

   ...
    ,
    "styles": [
      "node_modules/jodit-pro/build/jodit.css",
      ...
    ],
   ...
   

4. Add node_modules/jodit-pro/build/jodit.js to your app's scripts in angular.json (or project.json for Nx):

   ...
    ,
    "scripts": [
          "node_modules/jodit-pro/build/jodit.js"
      ...
    ],
   ...
   

5. Add NgxJoditProModule to the imports array in your app.module.ts:

   @NgModule({
    ...
    imports: [
      ...,
      NgxJoditProModule
    ],
    ...
    })
   

6. Now you can use the component

     <ngx-jodit-pro [(value)]="value" [options]="options" #joditComponent></ngx-jodit-pro>
   

Usage

Using Jodit Pro API

Use Pro plugins

At the moment each Pro plugin you want to use must be imported into you angular.json/project.json scripts and styles array. For example the tune-block plugin:

...
styles: [
  ... (after jodit css file)...,
  "node_modules/jodit-pro/build/plugins/tune-block/tune-block.css",
],
scripts: [
  ... (after jodit js file) ...,
  "node_modules/jodit-pro/build/plugins/tune-block/tune-block.js",
]
...

After that change restart your angular app. Now you can apply the plugin options to ngx-jodit-pro options property.

Add custom plugins

You can access the initialized Jodit from the attribute "jodit" of the NgxJoditProComponent to use the Pro API:

Any component.ts:

import {ViewChild} from '@angular/core';

//...
@ViewChild("joditComponent") joditComponent?: NgxJoditProComponent;

// in ngAfterViewInit
if (this.joditComponent){
   // example:
   this.joditComponent.jodit.plugins.add("hello", ()=>{
       alert("hello!");
   });
}

Any component.html:

<ngx-jodit-pro #joditComponent ...></ngx-jodit-pro>

Options

All options from Jodit are supported.

Options for ngx-jodit

Name	Type	Description
value	two-way data-binding	Updates as soon as HTML value of the editor changed. You can set your value, too.
options	one-way data-binding	Sets options for Jodit

Events for ngx-jodit

You can bind events using the Angular way, e.g.:
<ngx-jodit (joditChange)="onChange($event)"></ngx-jodit>

Name	Description
joditChange	Triggers as soon as something of the HTML value changes.
joditKeyDown	Triggers as soon as a key is pressed down.
joditKeyUp	Triggers as soon as a key is released.
joditMousedown	Triggers as soon as the left mouse button is pressed.
joditMouseup	Triggers as soon as the left mouse button is released.
joditClick	Triggers as soon as the user clicks on the editor.
joditFocus	Triggers as soon as Jodit gets focus.
joditPaste	Triggers as soon as something is pasted.
joditResize	Triggers as soon as the editor resizes.
joditBeforeEnter	Triggers as soon as enter key is pressed.
joditBeforeCommand	Triggers before a command is executed.
joditAfterExec	Triggers after a command is executed.
joditAfterPaste	Triggers after something pasted.
joditChangeSelection	Triggers as soon as selection is changed.