ngx-jodit v3.1.2
ngx-jodit v3.x
Angular wrapper for Jodit WYSIWYG editor. It supports Angular >= 16 and jodit v4.
Compatibility table
Jodit Pro, Multi & OEM
For Jodit Pro, Multi and OEM you have to install the jodit-pro package and another Angular library: ngx-jodit-pro. For more information click here.
Demo
You can find a demo for ngx-jodit 3.x here.
Options
All options from Jodit are supported.
Installation
- Make sure that the latest jodit v4 and ngx-jodit v3 is installed:
npm install jodit@4 --save
npm install ngx-jodit@3 --save
- Add jodit stylesheet to your app's styles in angular.json (or project.json for
Nx).
... , "styles": [ ... "node_modules/jodit/es2021/jodit.min.css", ... ], ...
- Add
NgxJoditComponent
to theimports
array in your app.module.ts (it's standalone):@NgModule({ ... imports: [ ..., NgxJoditComponent ], ... })
Add
"skipLibCheck": true
to compilerOptions in yourtsconfig.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 } ...
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".
Now you can use the component. See example here.
Without AngularForms:
<ngx-jodit [(value)]="value" [options]="options"></ngx-jodit>
With AngularForms (make sure to import AngularForms):
Template driven
<ngx-jodit [(ngModel)]="value" [options]="options"></ngx-jodit>
Reactive
<form [formGroup]="formGroup"> <ngx-jodit [options]="options" formControlName="editor"></ngx-jodit> </form>
How to import plugins
Jodit v4 automatically imports a basic set of plugins and the English language. If you want to use more you have to import it separately. For example:
import {Jodit} from "jodit";
import 'jodit/esm/plugins/add-new-line/add-new-line.js';
import 'jodit/esm/plugins/fullsize/fullsize.js';
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.
Options for ngx-jodit
Events for ngx-jodit
You can bind events using the Angular way, e.g.:
<ngx-jodit (joditChange)="onChange($event)"></ngx-jodit>
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
6 months ago
7 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
7 months ago
8 months ago
8 months ago
8 months ago
8 months ago
6 months ago
8 months ago
11 months ago
11 months ago
11 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
10 months ago
2 years ago
2 years ago
2 years ago