diff --git a/libs/ngx-jodit/README.md b/libs/ngx-jodit/README.md index 846a88b..b02c1b5 100644 --- a/libs/ngx-jodit/README.md +++ b/libs/ngx-jodit/README.md @@ -1,7 +1,178 @@ -# ngx-jodit +# ngx-jodit v2.x npm -This library was generated with [Nx](https://nx.dev). +Angular wrapper for Jodit WYSIWYG editor. It supports Angular >= 12 and jodit >=4.0.0-beta. **Jodit v4 is still in development. PLEASE have a look an the installation instructions, there are some breaking changes in jodit v4.** -## Running unit tests +## Compatibility table -Run `nx test ngx-jodit` to execute the unit tests. + + + + + + + + + + + + + +
Ngx-joditJoditAngularType
1.xv3>= v12Modulemore Information
2.x>= v4>= v12Modulemore Information
3.x>= v4>= v16Standalonemore Information
+ +## 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](https://github.com/julianpoemp/ngx-jodit/tree/v2.x/libs/ngx-jodit-pro/README.md). For more information click [here](https://github.com/julianpoemp/ngx-jodit/tree/v2.x/libs/ngx-jodit-pro/README.md). + +## Demo + +You can find a demo [here](https://julianpoemp.github.io/ngx-jodit/). + +## Options + +All [options](https://xdsoft.net/jodit/docs/classes/config.Config.html) from Jodit are supported. + +## Installation + +1. Make sure that jodit is installed: + ``` + npm install jodit@beta --save + ``` +2. ``` + npm install ngx-jodit@2.0.0-beta.2 --save + ``` +3. Add jodit stylesheet to your app's styles in angular.json (or project.json for + Nx). + - For ES5: + ``` + ... + , + "styles": [ + "node_modules/jodit/es5/jodit.min.css", + ... + ], + ... + ``` + - For other (it doesn't matter which stylesheet, all for >= es2015 are the same: + ``` + ... + , + "styles": [ + "node_modules/jodit/es2015/jodit.min.css", + ... + ], + ... + ``` +4. Add `NgxJoditModule` to the `imports` array in your app.module.ts: + ``` + @NgModule({ + ... + imports: [ + ..., + NgxJoditModule + ], + ... + }) + ``` +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. Now you can use the component + + ```angular2html + + ``` + + +## Options for ngx-jodit + + + + + + + + + + + + + + + + + + + + + +
NameTypeDescription
valuetwo-way data-bindingUpdates as soon as HTML value of the editor changed. You can set your value, too.
optionsone-way data-bindingSets 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> +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescription
joditChangeTriggers as soon as something of the HTML value changes.
joditKeyDownTriggers as soon as a key is pressed down.
joditMousedownTriggers as soon as the left mouse button is pressed.
joditClickTriggers as soon as the user clicks on the editor.
joditFocusTriggers as soon as Jodit gets focus.
joditPasteTriggers as soon as something is pasted.
joditResizeTriggers as soon as the editor resizes.
joditBeforeEnterTriggers as soon as enter key is pressed.
joditBeforeCommandTriggers before a command is executed.
joditAfterExecTriggers after a command is executed.
joditAfterPasteTriggers after something pasted.
joditChangeSelectionTriggers as soon as selection is changed.