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.
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).
Ngx-jodit-pro | Jodit Pro | Angular | Type | Demo | Readme |
---|---|---|---|---|---|
v1.x | >= v12 | Module | Demo | Readme | |
v2.x | >= v12 | Module | Demo | Readme | |
v2.x | >= v16 | Standalone | Demo | Readme |
You can find a demo of ngx-jodit-pro 3.x here.
-
Make sure that jodit-pro@beta AND jodit@beta is installed:
npm install jodit-pro@beta jodit@beta --save
-
npm install ngx-jodit-pro@3x --save
-
Add the following path to your app's styles in angular.json (or project.json for Nx):
... , "styles": [ "node_modules/jodit-pro/es2021/jodit.fat.min.css", ... ], ...
-
Add
NgxJoditProComponent
(standalone) to theimports
array in your app.module.ts:@NgModule({ ... imports: [ ..., NgxJoditProComponent ], ... })
-
Now you can use the component
<ngx-jodit-pro [(value)]="value" [options]="options" #joditComponent></ngx-jodit-pro>
You can install plugins from Jodit and Jodit Pro. For more information about Jodit Pro plugins see Jodit Pro Docs.
- Open folder "node_modules/jodit-pro" or "node_modules/jodit" depending on if you want to add jodit oder jodit-pro plugins.
- Open the plugin folder in "esm/plugins", e.g. "tune-block" in "jodit-pro".
- Look for the main file named like the plugin e.g. "tune-block.js".
- 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 "jodit";
import "node_modules/jodit-pro/esm/plugins/tune-block/tune-block.js";
Now you can apply the plugin options to ngx-jodit-pro options
property. For example:
import {JoditProConfig} from 'ngx-jodit-pro';
options:JoditProConfig = {
tuneBlock: {
popup: {
p: Jodit.atom(['align', 'tune.up', 'tune.remove', 'tune.down'])
}
}
}
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>
All options from Jodit AND JoditPro are supported. Use type "JoditProConfig" for options.
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 |
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. |