ngx-jodit-pro

ngx-jodit-pro v3.x

Angular wrapper for Jodit PRO WYSIWYG editor. It supports Angular >= 16 and jodit-pro v2 beta. You need a license key in order to use this wrapper. Buy here.

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	Demo	Readme
	v4.x	>= v16	Standalone	Demo	Readme
	v2.x	>= v12	Module	Demo	Readme
	v1.x	>= v12	Module	Demo	Readme

Demo

You can find a demo of ngx-jodit-pro 3.x here.

Remarks

ESM for Jodit-Pro is not currently working. See issue 34. You have to include the es2021 build (see installation).

Installation

1. Make sure that jodit-pro@4 AND jodit@4 is installed:

   npm install jodit-pro@4 jodit@4 --save
   

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

3. Add the following paths to your app's styles and scripts in angular.json (or project.json for Nx):

   ...
    ,
    "styles": [
      "node_modules/jodit-pro/es2021/jodit.min.css",
      ...
    ],
    "scripts": [
      "node_modules/jodit-pro/es2021/jodit.min.js",
      ...
    ],
   ...
   

4. Add NgxJoditProComponent (standalone) to the imports array in your app.module.ts:

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

5. Add "skipLibCheck": true to compilerOptions in your tsconfig.app.json. This is needed because the check fails to typing errors of the jodit package. This is still the issue in v4. If you know any other solution, let me know :):

   ...
     "compilerOptions": {
       ...,
       "skipLibCheck": true
     }
   ...
   

6. Each toolbar element by Jodit v4 is considered as plugin. While basic plugins are imported automatically, you have to import other plugins manually. See section "How to import plugins".

7. Now you can use the component. See example here.

• Without AngularForms:

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

• With AngularForms (make sure to import AngularForms):

  • Template driven

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

  • Reactive

      <form [formGroup]="formGroup">
        <ngx-jodit-pro [options]="options" formControlName="editor"></ngx-jodit-pro>
      </form>
    

If you are facing any issues have a look on Troubleshooting first. Create an issue if it's not solved.

How to import plugins

You can install plugins from Jodit and Jodit Pro. For more information about Jodit Pro plugins see Jodit Pro Docs.

1. Open folder "node_modules/jodit-pro" or "node_modules/jodit" depending on if you want to add jodit oder jodit-pro plugins.
2. Open the plugin folder in "esm/plugins", e.g. "tune-block" in "jodit-pro".
3. Look for the main file named like the plugin e.g. "tune-block.js".
4. Import "jodit" and the path to this file in a Typescript file of your application. E.g. the Angular component that includes ngx-jodit-pro. For example:

import "node_modules/jodit-pro/esm/plugins/tune-block/tune-block.js";

declare const Jodit: any; // <- needed because of missing ESM, see issue 34
Jodit.lang.de = de;

You can import your plugins wherever you want, e.g. in a global ts file that's imported anyway like index.ts or main.ts files.

Now you can apply the plugin options to ngx-jodit-pro options property. For example:

import {JoditProConfig} from 'ngx-jodit-pro';
import "node_modules/jodit-pro/esm/plugins/tune-block/tune-block.js";

declare const Jodit: any; // <- needed because of missing ESM, see issue 34

options: JoditProConfig = {
  tuneBlock: {
    popup: {
      p: Jodit.atom(['align', 'tune.up', 'tune.remove', 'tune.down'])
    }
  }
}

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 AND JoditPro are supported. Use type "JoditProConfig" for options.

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-pro (joditChange)="onChange($event)"></ngx-jodit-pro>

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.

Troubleshooting

• Some of the buttons don't show any icon
  Check your options if you used the correct button names. If yes, check the folder node_modules/jodit/es2021/plugins/ for a folder named like the button you want to use. Then import the found plugin to your app as described here. If that doesn't helpt look in the web console for an error message that indicates a missing plugin.