ngx-jodit-pro v1.0.7

ngx-jodit-pro v2.x (beta)

Angular wrapper for Jodit PRO WYSIWYG editor. It supports Angular >= 12 and jodit-pro 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

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-pro@beta is installed (v2 is still in beta and supported only with ngx-jodit-pro v2, see compatibility table):

   npm install jodit-pro@beta --save

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

3. Add the following paths to your app's styles in angular.json (or project.json for Nx). Alternatively yu can add the JS and CSS file from one of the other builds from the jodit-pro package. The only important point is to have a JS file and a CSS file of Jodit-Pro and each plugin you want to use:

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

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

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

5. Now you can use the component

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

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/es2021/plugins/tune-block/tune-block.min.css",
],
scripts: [
  ... (after jodit js file) ...,
  "node_modules/jodit-pro/es2021/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

Events for ngx-jodit