Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
ngx-jodit
Advanced tools
Readme
Angular wrapper for Jodit WYSIWYG editor. It supports Angular >= 16 and jodit v4.
Ngx-jodit | Jodit | Angular | Type | Demo | Readme |
---|---|---|---|---|---|
v4 | >= v16 | Standalone | Demo | Readme | |
v4 | v12 - v15 | Module | Demo | Readme | |
v3 | v12 - v15 | Module | Demo | Readme |
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.
You can find a demo for ngx-jodit 3.x here.
All options from Jodit are supported.
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 the imports
array in your app.module.ts (it's standalone):
@NgModule({
...
imports: [
...,
NgxJoditComponent
],
...
})
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
}
...
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>
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.
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. |
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. |
FAQs
Angular wrapper for jodit WYSIWYG editor
The npm package ngx-jodit receives a total of 83 weekly downloads. As such, ngx-jodit popularity was classified as not popular.
We found that ngx-jodit demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.