# ngx-jodit-pro

> Angular wrapper for Jodit Pro WYSIWYG editor

Latest version **4.0.0** (published 2026-09-07) · 0 weekly downloads

## Install

```sh
npm install ngx-jodit-pro
pnpm add ngx-jodit-pro
yarn add ngx-jodit-pro
bun add ngx-jodit-pro
```

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 4.0.0 |
| Published | 2026-09-07 |
| First published | 2023-06-23 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM |
| Dependencies | 1 |
| Unpacked size | 37.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 19 |
| Author | Julian Poemp |
| Maintainers | julianpoemp |
| Keywords | angular, jodit, html, text, editor, wysisyg, rich editor, rich text editor, rte, typescript |

## Links

- npm: https://www.npmjs.com/package/ngx-jodit-pro
- Repository: https://github.com/julianpoemp/ngx-jodit
- Homepage: https://julianpoemp.github.io/ngx-jodit/
- Issues: https://github.com/julianpoemp/ngx-jodit/issues
- npm.io page: https://npm.io/package/ngx-jodit-pro

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^2.3.0

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 4.0.0 (latest) — 2026-09-07
- 3.0.2 (3x) — 2026-09-07
- 2.0.1 (2x) — 2024-10-25
- 1.0.8 (x1) — 2024-10-24
- 3.0.0-beta.3 (beta) — 2023-09-18
- 3.0.1 — 2024-11-20
- 3.0.0 — 2024-10-24
- 3.0.0-beta.6 — 2023-12-19
- 2.0.0-beta.7 — 2023-12-19
- 3.0.0-beta.5 — 2023-09-26
- 2.0.0-beta.6 — 2023-09-26
- 1.0.7 — 2023-09-26
- 1.0.6 — 2023-09-25
- 3.0.0-beta.4 — 2023-09-22
- 2.0.0-beta.5 — 2023-09-22
- … 13 more at https://npm.io/package/ngx-jodit-pro/versions

## README

# ngx-jodit-pro v4.x

Angular wrapper for <a href="https://xdsoft.net/jodit/pro/">Jodit PRO</a> WYSIWYG editor. It supports Angular >= 16 and
jodit-pro v4. You need a license key in order to use this wrapper. <a href="https://xdsoft.net/jodit/pro/#compare">
Buy here.</a>

## 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](https://xdsoft.net/jodit/pro/license/)).

## Compatibility

<table>
<thead><tr><th>Ngx-jodit-pro</th><th>Jodit Pro</th><th>Angular</th><th>Type</th><th>ESM</th><th>Demo</th><th>Readme</th></tr></thead>
<tbody>
<tr>
<td style="text-align:center;"><a href="https://www.npmjs.com/package/ngx-jodit-pro"><img alt="npm" src="https://img.shields.io/npm/v/ngx-jodit-pro"></a></td><td>v4.x</td><td>>= v16</td><td>Standalone</td><td>Yes</td><td><a href="https://github.julianpoemp.com/ngx-jodit-pro/4.x/">Demo</a></td><td><a href="https://github.com/julianpoemp/ngx-jodit/blob/main/libs/ngx-jodit-pro/README.md">Readme</a></td>
</tr>
<tr>
<td style="text-align:center;"><a href="https://www.npmjs.com/package/ngx-jodit-pro/v/3x"><img alt="npm" src="https://img.shields.io/npm/v/ngx-jodit-pro/3x"></a></td><td>v4.x</td><td>>= v16</td><td>Standalone</td><td>No</td><td><a href="https://github.julianpoemp.com/ngx-jodit-pro/3.x/">Demo</a></td><td><a href="https://github.com/julianpoemp/ngx-jodit/blob/v3.x/libs/ngx-jodit-pro/README.md">Readme</a></td>
</tr>
<tr>
<td style="text-align:center;"><a href="https://www.npmjs.com/package/ngx-jodit-pro/v/2x"><img alt="npm" src="https://img.shields.io/npm/v/ngx-jodit-pro/2x"></a></td><td>v4.x</td><td>v12 - v15</td><td>Module</td><td>No</td><td><a href="https://github.julianpoemp.com/ngx-jodit-pro/2.x/">Demo</a></td><td><a href="https://github.com/julianpoemp/ngx-jodit/blob/v2.x/libs/ngx-jodit-pro/README.md">Readme</a></td>
</tr>
<tr>
<td style="text-align:center;">v1.x <i>(deprecated)</i></td><td>v1.x</td><td>v12 - v15</td><td>Module</td><td>No</td><td><a href="https://github.julianpoemp.com/ngx-jodit-pro/1.x/">Demo</a></td><td><a href="https://github.com/julianpoemp/ngx-jodit/blob/v1.x/libs/ngx-jodit-pro/README.md">Readme</a></td>
</tr>
</tbody>
</table>

## Demo

You can find a demo of ngx-jodit-pro 4.x [here](https://github.julianpoemp.com/ngx-jodit-pro/4.x/).

## Remarks

ESM fpr jodit-pro is supported since ngx-jodit-pro v4.

## 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",
      ...
    ],
   ...
   ```

   Remark: If you upgrade from ngx-jodit-pro make sure to remove the jodit JS include!

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 ESM version 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](https://github.com/julianpoemp/ngx-jodit/tree/main/apps/demo-pro).

- Without AngularForms:

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

- With AngularForms (make sure to import AngularForms):
  - Template driven

    ```angular2html
      <ngx-jodit-pro [(ngModel)]="value" [options]="options"></ngx-jodit-pro>
    ```
  - Reactive
    ```angular2html
      <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](https://github.com/julianpoemp/ngx-jodit/blob/main/libs/ngx-jodit/README.md#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](https://xdsoft.net/jodit/pro/docs/).

```typescript
import 'jodit/esm/plugins/add-new-line/add-new-line.js';
import 'jodit/esm/plugins/fullsize/fullsize.js';
import "jodit-pro/esm/plugins/tune-block/tune-block.js"; // you don't need to CSS for each plugin
import de from 'jodit/esm/langs/de.js'; // <-- make sure "compilerOptions.allowSyntheticDefaultImports" is set to "true" in tsconfig.json

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:

```typescript
import {Jodit} from "jodit-pro";
import {JoditProOptions} from 'ngx-jodit-pro';
import "jodit-pro/esm/plugins/tune-block/tune-block.js";

options: JoditProOptions = {
  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:

````typescript
import {ViewChild} from '@angular/core';
import {NgxJoditProComponent} from 'ngx-jodit-pro';

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

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

Any component.html:

```HTML

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

### Options

All [options](https://xdsoft.net/jodit/docs/classes/config.Config.html) from Jodit AND JoditPro are supported. Use type "JoditProConfig" for options.

### Options for ngx-jodit

<table class="table table-sm table-striped table-bordered">
  <thead>
  <tr>
    <td class="fw-bold">Name</td>
    <td class="fw-bold">Type</td>
    <td class="fw-bold">Description</td>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>value</td>
    <td>two-way data-binding</td>
    <td>Updates as soon as HTML value of the editor changed. You can set your value, too.</td>
  </tr>
  <tr>
    <td>options</td>
    <td>one-way data-binding</td>
    <td>Sets options for Jodit</td>
  </tr>
  </tbody>
</table>

## Events for ngx-jodit

You can bind events using the Angular way, e.g.:

```angular2html

<ngx-jodit-pro (joditChange)="onChange($event)"></ngx-jodit-pro>
```

<table class="table table-sm table-striped table-bordered">
  <thead>
  <tr>
    <td class="fw-bold">Name</td>
    <td class="fw-bold">Description</td>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>joditChange</td>
    <td>Triggers as soon as something of the HTML value changes.</td>
  </tr>
  <tr>
    <td>joditKeyDown</td>
    <td>Triggers as soon as a key is pressed down.</td>
  </tr>
  <tr>
    <td>joditKeyUp</td>
    <td>Triggers as soon as a key is released.</td>
  </tr>
  <tr>
    <td>joditMousedown</td>
    <td>Triggers as soon as the left mouse button is pressed.</td>
  </tr>
  <tr>
    <td>joditMouseup</td>
    <td>Triggers as soon as the left mouse button is released.</td>
  </tr>
  <tr>
    <td>joditClick</td>
    <td>Triggers as soon as the user clicks on the editor.</td>
  </tr>
  <tr>
    <td>joditFocus</td>
    <td>Triggers as soon as Jodit gets focus.</td>
  </tr>
  <tr>
    <td>joditPaste</td>
    <td>Triggers as soon as something is pasted.</td>
  </tr>
  <tr>
    <td>joditResize</td>
    <td>Triggers as soon as the editor resizes.</td>
  </tr>
  <tr>
    <td>joditBeforeEnter</td>
    <td>Triggers as soon as enter key is pressed.</td>
  </tr>
  <tr>
    <td>joditBeforeCommand</td>
    <td>Triggers before a command is executed.</td>
  </tr>
  <tr>
    <td>joditAfterExec</td>
    <td>Triggers after a command is executed.</td>
  </tr>
  <tr>
    <td>joditAfterPaste</td>
    <td>Triggers after something pasted.</td>
  </tr>
  <tr>
    <td>joditChangeSelection</td>
    <td>Triggers as soon as selection is changed.</td>
  </tr>
  </tbody>
</table>

## Troubleshooting

- **Some of the buttons don't show any icon**<br/>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](https://github.com/julianpoemp/ngx-jodit/blob/main/libs/ngx-jodit-pro/README.md#how-to-import-plugins). If that doesn't helpt look in the web console for an error message that indicates a missing plugin.

---
_Source: https://npm.io/package/ngx-jodit-pro · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._