ngx-jodit
TypeScript icon, indicating that this package has built-in type declarations

3.1.2 • Public • Published

ngx-jodit v3.x

Angular wrapper for Jodit WYSIWYG editor. It supports Angular >= 16 and jodit v4.

Compatibility table

Ngx-jodit Jodit Angular Type Demo Readme
npm v4 >= v16 Standalone Demo Readme
npm v4 v12 - v15 Module Demo Readme
npm v3 v12 - v15 Module Demo Readme

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

  1. Make sure that the latest jodit v4 and ngx-jodit v3 is installed:

    npm install jodit@4 --save
    
  2. npm install ngx-jodit@3 --save
    
  3. Add jodit stylesheet to your app's styles in angular.json (or project.json for Nx).

    ...
     ,
     "styles": [
       ...
       "node_modules/jodit/es2021/jodit.min.css",
       ...
     ],
    ...
    
  4. Add NgxJoditComponent to the imports array in your app.module.ts (it's standalone):

    @NgModule({
     ...
     imports: [
       ...,
       NgxJoditComponent
     ],
     ...
     })
    
  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.

  • 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

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 on the fly.

Events for ngx-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.
joditMousedown Triggers as soon as the left mouse button is pressed.
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.

Package Sidebar

Install

npm i ngx-jodit

Weekly Downloads

155

Version

3.1.2

License

MIT

Unpacked Size

65.5 kB

Total Files

12

Last publish

Collaborators

  • julianpoemp