jodit / jodit-angular Goto Github PK

Jodit-Angular Version: 1.0.81

Browser: Chrome
OS: Windows

Expected behavior:
Image downloading request's hender can be sent with token as the following,

Accept: application/json
Authorization: Bearer 'token string here'
Referer: http://localhost:4200/sh/721408ea-2812-4c78-a737-611cab1f3102/account/tk
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.142 Safari/537.36

Actual behavior:
Havn't got a way to achieve this.

I've tried interceptor catching the request, and then add token to the request's header, but it looks like the interceptor cannot catch the image downloading request, still not sure why not.. Probably because jodit's using another http clients?

Is there a way to customize the image downloading request to add token into the header?

I have set up the universal app using the standard procedure and I realised when trying to run the application using node I get the following error:

`!function(e,t){ true?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.Jodit=t():e.Jodit=t()}("undefined"!=typeof self?self:this,function(){return function(e){function t(n){if(o[n])return o[n].exports;var i=o[n]={i:n,l:!1,exports:{}};return e[n].call(i.exports,i,i.exports,t),i.l=!0,i.exports}var o={};return t.m=e,t.c=o,t.d=function(e,o,n){t.o(e,o)||Object.defineProperty(e,o,{configurable:!1,enumerable:!0,get:n})},t.n=function(e){var o=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(o,"a",o),o},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="/build/",t(t.s=21)}([function(e,t,o){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=o(2),i=o(3),r={},s=r.toString,a=r.hasOwnProperty;t.isIE=function(){return-1!=navigator.userAgent.indexOf("MSIE")||/rv:11.0/i.test(navigator.userAgent)};var l=1;t.$$=function(

ReferenceError: window is not defined`

The problem with that is that is happening when I import the JoditAngularModule and unfortunately I can't get this to work. Any ideas about how can it be solved?

v: 1.0.69+

I can't seem to get 1.0.69 or 1.0.70 to run. 1.0.59 runs just fine.
The only difference I see when running is:

./node_modules/jodit-angular/node_modules/@angular/core/fesm5/core.js
15153:15-36 Critical dependency: the request of a dependency is an expression

I have one problem with the jodit-editor the iconos somethings change de color

Hi,

the migration of my Angular application to version 8 failed. I got the following message:

The template migration strategy uses the Angular compiler internally and therefore projects that no longer build successfully after the update
cannot use the template migration strategy. Please ensure there are no AOT compilation errors.
            
Could not setup migration strategy for "projects/editor/tsconfig.app.json". The following error has been reported:
            
Error: error TS100: jodit-angular\jodit-angular.ts(6,2): Error during template compile of 'JoditAngularModule' Function calls are not supported in decorators but 'ɵmakeDecorator' was called in 'NgModule' 'NgModule' calls 'ɵmakeDecorator'.

Migration can be rerun with: "ng update @angular/core --from 7 --to 8 --migrate-only"

Which version can I use with following Angular? I have tried with several versions but I get a lot of errors.

Angular CLI: 1.7.4
Node: 8.15.0
OS: darwin x64
Angular: 5.2.9
... animations, common, compiler, compiler-cli, core, forms
... http, platform-browser, platform-browser-dynamic
... platform-server, router

@angular/cdk: 5.2.4
@angular/cli: 1.7.4
@angular/language-service: 5.2.8
@angular/material: 5.2.4
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.2
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.6.2
webpack: 3.11.0

These are erros I got:
ERROR in node_modules/jodit-angular/Events.d.ts(2,8): error TS1192: Module '"/Users/wilsondeoliveirajunior/Documents/CP Placas/Software/cp-app/node_modules/jodit/src/types/index"' has no default export. node_modules/jodit/src/Config.ts(816,12): error TS2352: Type '{ exec: (editor: IJodit) => void; mode: number; }' cannot be converted to type 'IControlType<IJodit | IViewBased<IViewOptions> | IFileBrowser, IToolbarButton>'. Types of property 'mode' are incompatible. Type 'number' is not comparable to type 'Modes'. node_modules/jodit/src/Config.ts(853,12): error TS2352: Type '{ exec: (editor: IJodit) => void; tooltip: string; mode: number; }' cannot be converted to type 'IControlType<IJodit | IViewBased<IViewOptions> | IFileBrowser, IToolbarButton>'. Types of property 'mode' are incompatible. Type 'number' is not comparable to type 'Modes'. node_modules/jodit/src/modules/Dom.ts(278,27): error TS2304: Cannot find name 'unknown'. node_modules/jodit/src/modules/Dom.ts(297,24): error TS2304: Cannot find name 'unknown'. node_modules/jodit/src/modules/Dom.ts(308,25): error TS2304: Cannot find name 'unknown'. node_modules/jodit/src/modules/Dom.ts(323,26): error TS2304: Cannot find name 'unknown'. node_modules/jodit/src/modules/Dom.ts(337,32): error TS2304: Cannot find name 'unknown'. node_modules/jodit/src/modules/Plugin.ts(23,5): error TS2424: Class 'Component<IJodit>' defines instance member function 'destruct', but extended class 'Plugin' defines it as instance member property. node_modules/jodit/src/modules/Selection.ts(90,30): error TS2304: Cannot find name 'CaretPosition'. node_modules/jodit/src/modules/Uploader.ts(201,45): error TS2345: Argument of type 'IViewBased<IViewOptions> | this' is not assignable to parameter of type 'IViewBased<IViewOptions>'. Type 'this' is not assignable to type 'IViewBased<IViewOptions>'. Type 'Uploader' is not assignable to type 'IViewBased<IViewOptions>'. Property 'id' is missing in type 'Uploader'. node_modules/jodit/src/modules/dialog/dialog.ts(124,45): error TS2345: Argument of type '(elm: ChildNode) => void' is not assignable to parameter of type '(value: Node, index: number, array: Node[]) => void'. Types of parameters 'elm' and 'value' are incompatible. Type 'Node' is not assignable to type 'ChildNode'. Property 'remove' is missing in type 'Node'. node_modules/jodit/src/modules/dialog/dialog.ts(126,34): error TS2345: Argument of type 'ChildNode' is not assignable to parameter of type 'Node'. Property 'attributes' is missing in type 'ChildNode'. node_modules/jodit/src/modules/helpers/checker/isJoditObject.ts(14,38): error TS2304: Cannot find name 'unknown'. node_modules/jodit/src/modules/toolbar/element.ts(76,17): error TS2322: Type 'void | HTMLElement' is not assignable to type 'HTMLElement'. Type 'void' is not assignable to type 'HTMLElement'. node_modules/jodit/src/modules/toolbar/joditToolbarCollection.ts(55,13): error TS2322: Type 'boolean | void' is not assignable to type 'boolean'. Type 'void' is not assignable to type 'boolean'.

Hi there,

Is it possible to add a video to the editor and not have a standard width/height defined in pixels but in %? I'd like to adjust an iframe to the width of the screen but can't get it to work.

Thanks

In mobile applications, If we type something in the editor and click device back button to navigate back while editing (focused state). Jodit is not responding afterwards where no content is visible in the editor even if you type.

More details:

• Data is getting prefilled into editor on component init, but no new content is visible when typed

• onChange emits nothing

Guys I have one issue I am using this editor in Angular 8 version. I am trying to pass html snippet through editor. But some how editor converts the element attributes to lower case for Example
<div [ngSwitch]="x"></div> is transformed to <div [ngswitch]="x"></div>
<p [routerLink]="['/error']"></p> is transformed to <p [routerlink]="['/error']"></p>

I even tried with cleanhtml but even that didn't help.

Have anyone faced this issue?
Do we have any config option to avoid this?

Thanks In Advance.

I've seen your latest commits about eventHandling, i'm looking to use (blur) to hide the editor but can't trigger it. I see the OnFocus event on your code but not the OnBlur. Is it possible to add it? Will it work just adding it?

I can make a pull request if required

I think the package cannot be used yet with Angular 6.X. I got the following error when trying to install it:

ERROR in node_modules/@angular/core/src/render3/ng_dev_mode.d.ts(9,11): error TS2451: Cannot redeclare block-scoped variable 'ngDevMode'.
node_modules/jodit-angular/node_modules/@angular/core/src/render3/ng_dev_mode.d.ts(9,11): error TS2451: Cannot redeclare block-scoped variable 'ngDevMode'.

Is there any chance you can publish a new version with the dependencies updated?

Thanks!

Hi,

Can anybody help, how to paste text at the actual position? I studied documentation, but still, I can not do. it.

Buttons with downlist icons like 'fontsize', 'image', or even 'link' button which opens a new 'box' is not working if they are inside 'dots' using Mobile | Chrome (Android) | Chrome (IOS) in an Ionic Project.

I did some tests with Angular blank project (without Ionic).. everything triggers fine (desktop/mobile).
But with an Angular-Ionic project, anything happens when I touch that buttons.. (only in mobile.. desktop is fine)

https://github.com/stt065907/jodit-angular-ionic

I'm wondering how the proper way to access the editor's value would look like. It's somehow missing in the readme. I'm currently using Jodit in my Ionic 3 app.

.html

<jodit-editor #editor
    (onChange)="editorValueChanged(editor)"
    [config]="{
        uploader: { insertImageAsBase64URI: 'true' },
        buttons: 'bold,strikethrough,underline,italic,|,superscript,subscript,|,ul,ol,hr,paragraph,|,image,video,table,link,|,undo,redo,|,print',
        language: 'de'}">
</jodit-editor>

.ts

editorValueChanged(editor) {
  editor.value = "somefunnytext"
}

This code is working. As soon as I type in some text in the editor, it gets replaced by "somefunnytet"...
BUT I naturally want my editor to let me set its value as soon as the page is loading. And not after I typed in some text (onChange).

I'm pretty new to Angular and Ionic, so I might just lack some basic knowledge of how this is done properly.

Hi,

I am following the current install steps found at this link - Angular jodit Install for installing into an Angular 5 CLI and also tried in an Angular 6 CLI project.

After following the install steps - I am receiving the following error

ERROR Error: StaticInjectorError(AppModule)[JoditAngularComponent -> ElementRef]: StaticInjectorError(Platform: core)[JoditAngularComponent -> ElementRef]: NullInjectorError: No provider for ElementRef!

Current Setup

App.module.ts
`
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

import { JoditAngularModule } from 'jodit-angular';

@NgModule({
imports: [ BrowserModule, FormsModule, JoditAngularModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
`

app.component.ts
`

Start editing to see some magic happen :)

<jodit-editor [config]="{buttons: 'bold'}">
`

Package.json
"jodit-angular": "^1.0.56",

Here is the link to the stackblitz example code:
https://stackblitz.com/edit/angular6-jodit-example

Please let me know if the current directions are missing a step or need to be updated.

Thanks in advanced

After adding the jodit component to the html and code, it makes my whole page run slow. If I type quickly in the editor or in an unrelated input field, I get lag of the input. It seems as though the component has a bug.

Issue:
After initialization, updating the config object's disabled property does not disable the editor.

Expectation:

<jodit-editor [config]="config"></jodit-editor>

ngOnInit() {
        this.config = {
            enter: "DIV",
            toolbarAdaptive: false,
            disabled: false
        };
}

disableEditor() {
        this.config.disabled = true;
}

When called, "disableEditor()" should disable the wysiwyg. It currently does not.

My current work-around is to have two editors. One initialized with disabled = false, and one with disabled = true and use [hidden] to switch between the two as needed. Obviously not ideal.

Is it possible to define a custom placeholder so "Start writing..." can be changed? I could not find it under the config options but I may have missed it.

Error in WebStorm:

ERROR in The ngcc compiler has changed since the last ngcc build.
Please remove "WebstormProjects/artprojects-admin/node_modules" and try again.

Error in browser:

Failed to compile.

node_modules/jodit-angular/Events.d.ts:22:25 - error TS2694: Namespace '"WebstormProjects/artprojects-admin/node_modules/jodit-angular/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDef'.

22     static ɵfac: ɵngcc0.ɵɵFactoryDef<Events>;
                           ~~~~~~~~~~~~
node_modules/jodit-angular/Events.d.ts:23:25 - error TS2694: Namespace '"WebstormProjects/artprojects-admin/node_modules/jodit-angular/node_modules/@angular/core/core"' has no exported member 'ɵɵDirectiveDefWithMeta'.

Environment

Angular CLI: 8.3.24
Node: 12.3.1
OS: darwin x64
Angular: 8.2.14

Actual Behavior

I get this error when installing v1.0.87

ERROR NullInjectorError: StaticInjectorError(AppModule)[JoditAngularComponent -> ElementRef]:

I think it is because the jodit-angular package.json specifies dependencies and not peerDependencies which causes jodit-angular to install angular 7 which conflicts with my applications angular 8 install. See this link for the recommended approach to creating Angular libraries.
https://angular.io/guide/creating-libraries#use-typescript-path-mapping-for-peer-dependencies

I have refactored your library as per Angulars recommended approach and it works fine in my app now. Can I send a PR to see what you think?

The width and height of the whole table can be changed but individual cols and rows can't. This feature works in pure jodit. Did I miss a config option?

I have a theme toggle (from light to dark) on the page and it does not update the theme option unless I refresh the page and the editor is initialized with the theme value.

Hello team,
I am encountering an issue while using this library,
While using latest version (1.0.99), I'm getting an error as:-

ERROR in .//jodit-angular/fesm5/jodit-angular.js
Module not found: Error: Can't resolve 'jodit' in '/var/www/html/git/inteleagent/node_modules/jodit-angular/fesm5'
@ .//jodit-angular/fesm5/jodit-angular.js 118:19-35
@ ./src/app/shared/shared.module.ts
@ ./src/app/frontend/frontend.module.ts
@ ./src/app/app.module.ts
@ ./src/app/main.ts
@ multi webpack-dev-server/client?http://localhost:4200 ./src/app/main.ts

In version 1.0.85
My screen loader comes & it's never ending

While in version 1.0.22, my errror is
/var/www/html/git/inteleagent/node_modules/jodit/src/Jodit.ts (1232,28): Property 'defaultMode' does not exist on type 'Config'.
/var/www/html/git/inteleagent/node_modules/jodit/src/Jodit.ts (1234,21): Property 'saveModeInStorage' does not exist on type 'Config'.
/var/www/html/git/inteleagent/node_modules/jodit/src/Jodit.ts (1244,21): Property 'readonly' does not exist on type 'Config'.
/var/www/html/git/inteleagent/node_modules/jodit/src/Jodit.ts (1249,21): Property 'disabled' does not exist on type 'Config'.

I'm working with Angular 4 , please help me in resolving this issue.

I followed the steps to integrate jodit for an angular application (using angular7).
Sadly it is not working and exists with the exception "Jodit is not a constructor".
I created a easy repro stackblitz here:
https://stackblitz.com/edit/angular-swuqxr?file=src%2Fapp%2Fapp.component.html

When typescripts option noImplicitAny is set to true, building the app result in the following error:

ERROR in node_modules/jodit-angular/Events.d.ts(2,19): error TS7016: Could not find a declaration file for module 'jodit'. '/home/alex/projects/rwl/front/ngx-client/src/node_modules/jodit/build/jodit.min.js' implicitly has an 'any' type.

This happens because module should have proper declaration to be compatible with typescripts noImplicitAny.
microsoft/TypeScript#15031

Please make it possible to compile with noImplicitAny options set to true, cause this feature may preserve a lot of errors, but your package is forcing people to turn this of for now.

P.S another way to avoid this is to set skipLibCheck: true introduced in ts 2.0 but it still seems not the right way to do things

I have following suggestion regarding current Angular LTS versions support as long as current version depends on obsolete Angular v8:

• Create branch v9, update dependencies to Angular v9 and release it under v1.9.* and support it until Aug 2021
• Create branch v10, update dependencies to Angular v10 and release it under v1.10.* and support it until Dec 2021
• Create branch v11, update dependencies to v11, release it under v1.11.* and support it until May 2022
• When v12 comes out - do the same

I can take care on branching and releasing, just need a green light on this

Would be glad to help

ERROR in node_modules/@angular/core/src/render3/ng_dev_mode.d.ts(9,11): 
error TS2451: Cannot redeclare block-scoped variable 'ngDevMode'.

node_modules/jodit-angular/node_modules/@angular/core/src/render3/ng_dev_mode.d.ts(9,11):
error TS2451: Cannot redeclare block-scoped variable 'ngDevMode'.

The issue seems to be the inclusion into the package of a specific version of @angular/core, so the variable ngDevMode is being declared twice in: -

jodit-angular/node_modules/@angular/core/src/render3/ng_dev_mode.d.ts

and

node_modules/@angular/core/src/render3/ng_dev_mode.d.ts

Here is the sample package.json. Change "jodit-angular": "1.0.17", to "jodit-angular": "1.0.18", and ng build fails with the error above. This is true for all subsequent versions up to and including 1.0.27

  "dependencies": {
	"@angular/animations": "^5.2.8",
	"@angular/cdk": "^5.2.4",
	"@angular/common": "^5.2.8",
	"@angular/compiler": "^5.2.8",
	"@angular/core": "^5.2.8",
	"@angular/flex-layout": "2.0.0-beta.10-4905443",
	"@angular/forms": "^5.2.8",
	"@angular/http": "^5.2.8",
	"@angular/material": "^5.2.4",
	"@angular/platform-browser": "^5.2.8",
	"@angular/platform-browser-dynamic": "^5.2.8",
	"@angular/router": "^5.2.8",
	"@aspnet/signalr-client": "^1.0.0-alpha2-final",
	"core-js": "^2.4.1",
	"font-awesome": "^4.7.0",
	"hammerjs": "^2.0.8",
	"honorific": "^1.0.2",
	"http-status-codes": "^1.3.0",
	"jodit-angular": "1.0.17",
	"jwt-decode": "^2.2.0",
	"rxjs": "^5.5.7",
	"zone.js": "^0.8.20"
  },
  "devDependencies": {
	"@angular/cli": "^1.7.3",
	"@angular/compiler-cli": "^5.2.8",
	"@angular/language-service": "^5.2.8",
	"@types/jasmine": "~2.5.53",
	"@types/jasminewd2": "~2.0.2",
	"@types/node": "^6.0.102",
	"angular-file": "^0.5.1",
	"codelyzer": "^4.2.1",
	"jasmine-core": "~2.6.2",
	"jasmine-spec-reporter": "~4.1.0",
	"json-stringify-safe": "^5.0.1",
	"karma": "~1.7.0",
	"karma-chrome-launcher": "~2.1.1",
	"karma-cli": "~1.0.1",
	"karma-coverage-istanbul-reporter": "^1.4.2",
	"karma-html-reporter": "^0.2.7",
	"karma-jasmine": "~1.1.0",
	"karma-jasmine-html-reporter": "^0.2.2",
	"karma-junit-reporter": "^1.2.0",
	"protractor": "~5.1.2",
	"ts-node": "~3.2.0",
	"tslint": "~5.7.0",
	"typescript": "2.6.2",
	"typescript-char": "0.0.0"
  }

Is there a simple way to use those attributes on the angular wrapper ?
Shouldn't it be added to the component in order to be able to use them when it's calling jodit ?

Using (onChange) instead of [(ngModel)] is very heavy and I can feel the performances drop.

For now I'm using a hidden input with the proper maxlength and required attribute and a [(ngModel)] updated on the (onChange) event from the editor input.
But it's getting slow, and I couldn't find a way to disable the jodit editor yet.

There must be a better solution.
Any advice ?

Hello,
Is it possible to make the brush only available for text and not for background ?

When you edit image styles and try to apply certain CSS directly in the input, the styles are not saved. Note that I'm trying to go from certain width and height to width 100% and height auto. Not sure if that something could prevent the CSS from being saved.

My setup:

"angular": "9.1.1"
"jodit": "3.3.22",
"jodit-angular": "1.0.99"

From what I'm testing and using jodit-angular for, I am not able to use the "resizer" plugin for image from v3.3.23 of jodit and above. I'm using the latest jodit-angular package (just did npm i angular-jodit. Just for future releases, maybe that's something to look at.

At the moment, I got it working with 1.0.99 of jodit-angular combined with 3.3.22 jodit. I'm using Angular 9.1.1

Thanks for the great work!

Hi,

problem:
by installing jodit-angular there will be generated an additional node_modules folder which ends in following error: "Cannot redeclare block-schoped variable 'ngDevMode'.

solution
delete the generated node_modules folder (everything works fine then)

@xdan: Can you tell me why you locate another additional node_modules folder in your package?

When using jodit-angular I can get my page loading correctly, but when I navigate away from the page I get a "TypeError: o.jodit.events is undefined"

When I navigate routes between pages without jodit everything loads fine. When I navigate to a route with jodit everything loads fine. When I navigate away from jodit to another page that is when I get the error.

While looking in to stackoverflow answers I come across this xdan/jodit#9 (comment) answer explaining how to use "vanilla" jodit with angular. It gives an action in ngOnDestroy to call this.editor.destruct(); Am I supposed to be taking actions similarly?

in my module.ts all the code I use relating to jodit

import { JoditAngularModule } from 'jodit-angular';
...
@NgModule({
imports: [
JoditAngularModule
]
})

In my html template I use

<jodit-editor [config]="{}"> </jodit-editor>

Using
jodit 3.1.5
jodit-angular 1.0.17
@angular/... 5.2.5
typescript 2.5.3
node 8.9.4

Full error

TypeError
    columnNumber: 34948
    fileName: "http://localhost:3001/mailandsms/vendor.bundle.js"
    lineNumber: 86746
    message: "o.jodit.events is undefined"
    stack: "t/o.immedateCheckActiveButtons@http://localhost:3001/mailandsms/vendor.bundle.js:86746:34948\n./node_modules/jodit/build/jodit.min.js/</</</t.debounce/</i<@http://localhost:3001/mailandsms/vendor.bundle.js:86746:8140\n./node_modules/zone.js/dist/zone.js/</</ZoneDelegate.prototype.invokeTask@http://localhost:3001/mailandsms/polyfills.bundle.js:2435:17\nonInvokeTask@http://localhost:3001/mailandsms/vendor.bundle.js:47116:24\n./node_modules/zone.js/dist/zone.js/</</ZoneDelegate.prototype.invokeTask@http://localhost:3001/mailandsms/polyfills.bundle.js:2434:17\n./node_modules/zone.js/dist/zone.js/</</Zone.prototype.runTask@http://localhost:3001/mailandsms/polyfills.bundle.js:2202:28\n./node_modules/zone.js/dist/zone.js/</</ZoneTask.invokeTask@http://localhost:3001/mailandsms/polyfills.bundle.js:2510:24\nZoneTask/this.invoke@http://localhost:3001/mailandsms/polyfills.bundle.js:2499:28\ntimer@http://localhost:3001/mailandsms/polyfills.bundle.js:4039:17\n
    "__proto__: {…}
    constructor: function TypeError()message: ""name: "TypeError"stack: ""__proto__: {…}constructor: function Error()
    message: ""
    name: "Error"
    stack: Getter & Setter
    toSource: function toSource()
    toString: function toString()
    __proto__: Object { … } app-error-handler.ts:5:4

If you need any other details please let me know

EDIT: Additional info

If I go to line 86746 col 34948 where the error points to this is the block of code;

o.jodit.events.fire("updateToolbar"))}

Is it possible to add an image from the local computer as opposed to setting the URL of it? I couldn't find that option in the playground.

Thanks!

Hello,

Is there an option to get the images to adjust with the relevant proportion (width x height) across multiple screens? In the same way the text adjusts itself and its fully responsive, I'd like the images to do so in order to get the articles well formed.

I'm not sure if there is a setting somewhere for this or do I have to do it myself? I have tried through the styles of the images themselves but that does not work.

My setup in Angular 9:

"jodit": "3.3.22",
"jodit-angular": "1.0.99",

Many thanks!

Hi, as appears at the last post of this issue - #9, when clicking on insert image, choosing the upload option and clicking on the small dialog to open the file explorer, sometimes it doesn't respond and I need to click twice.

Hello,

I am using jodit-angular v1.0.69
The buttons for imag, link and brush aren't working on mobile (don't display the popup like they do on web)
This is a video of the issue:

https://screencast.com/t/0xiVQIU6RpN

1.Bold or italic options are not working sometimes. Please refer the video attached TK270_5.
2.Select all option is not working properly. Please refer the video TK270_18.
Issues.tar.gz

When I write something in the editor and then remove it with ngIf statement:
TypeError: Cannot read property 'current' of undefined undefined TypeError: Cannot read property 'current' of undefined at t.calcPathImd (jodit.min.js:10) at jodit.min.js:10 at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421) at Object.onInvokeTask (core.js:3815) at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420) at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188) at push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask (zone.js:496) at ZoneTask.invoke (zone.js:485) at timer (zone.js:2054)

Steps to reproduce:

1. Place multiple editors like:
   <jodit-editor [formControl]="control1" *ngIf="control1enabled"></jodit-editor> <jodit-editor [formControl]="control2" *ngIf="control2enabled"></jodit-editor> <jodit-editor [formControl]="control3" *ngIf="control3enabled"></jodit-editor>
2. Write something to editor with control2
3. Switch control2enabled to control2enabled = false

Please can you update the package.json for Angular 10?

Jodit works when I am testing on my browser, but when I want to compile it for IOS prod using onic cordova build ios --prod --release it crashes with the following code

`
± |{9} U:16 ✗| →ionic cordova build ios --prod --release

ionic-app-scripts build --prod --target cordova --platform ios
[21:28:27] ionic-app-scripts 3.1.8
[21:28:27] build prod started ...
[21:28:27] clean started ...
[21:28:27] clean finished in 1 ms
[21:28:27] copy started ...
[21:28:27] deeplinks started ...
[21:28:27] deeplinks finished in 240 ms
[21:28:27] ngc started ...
[21:28:33] typescript: node_modules/jodit-angular/node_modules/@angular/core/src/application_init.d.ts, line: 26
Initializers are not allowed in ambient contexts.
[21:28:33] typescript: node_modules/jodit-angular/node_modules/@angular/core/src/linker/query_list.d.ts, line: 36
Initializers are not allowed in ambient contexts.
L36: * See
L37: * Array.map
[21:28:33] typescript: ...les/jodit-angular/node_modules/@angular/core/src/ivy_switch/compiler/legacy.d.ts, line: 19
A 'const' initializer in an ambient context must be a string or numeric literal.
L18: export declare let R3_COMPILE_NGMODULE_DEFS: DirectiveCompiler;
L19: export declare let R3_PATCH_COMPONENT_DEF_WTIH_SCOPE: DirectiveCompiler;
A computed property name in an interface must directly refer to a built-in symbol.
[21:28:33] typescript: ...ules/jodit-angular/node_modules/@angular/core/src/render3/interfaces/player.d.ts, line: 75
L74: * When present all animation players will be passed into the flush method below.
L75: * This feature is designed to service application-wide animation testing, live
L76: * debugging as well as custom animation choreographing tools.
A computed property name in an interface must directly refer to a built-in symbol.
[21:28:33] typescript: ...ules/jodit-angular/node_modules/@angular/core/src/render3/interfaces/player.d.ts, line: 76
L75: * This feature is designed to service application-wide animation testing, live
L76: * debugging as well as custom animation choreographing tools.
A computed property name in an interface must directly refer to a built-in symbol.
[21:28:33] typescript: ...ules/jodit-angular/node_modules/@angular/core/src/render3/interfaces/player.d.ts, line: 77
L76: * debugging as well as custom animation choreographing tools.
L78: export interface PlayerHandler {
A computed property name in an interface must directly refer to a built-in symbol.
[21:28:33] typescript: ...ules/jodit-angular/node_modules/@angular/core/src/render3/interfaces/player.d.ts, line: 78
L78: export interface PlayerHandler {
A computed property name in an interface must directly refer to a built-in symbol.
L78: export interface PlayerHandler {
[21:28:33] typescript: ...ules/jodit-angular/node_modules/@angular/core/src/render3/interfaces/player.d.ts, line: 79
[21:28:33] typescript: ...les/jodit-angular/node_modules/@angular/core/src/render3/interfaces/styling.d.ts, line: 123
L80: * Designed to kick off the player at the end of change detection
A computed property name in an interface must directly refer to a built-in symbol.
L122: * Location of initial data shared by all instances of this style.
L124: [StylingIndex.InitialStylesPosition]: InitialStyles;
A computed property name in an interface must directly refer to a built-in symbol.
L126: * A numeric value representing the configuration status (whether the context is dirty or not)
L127: * mixed together (using bit shifting) with a index value which tells the starting index value
L128: * of where the multi style entries begin.
[21:28:33] typescript: ...les/jodit-angular/node_modules/@angular/core/src/render3/interfaces/styling.d.ts, line: 127
[21:28:33] typescript: ...les/jodit-angular/node_modules/@angular/core/src/render3/interfaces/styling.d.ts, line: 131
[21:28:33] typescript: ...les/jodit-angular/node_modules/@angular/core/src/render3/interfaces/styling.d.ts, line: 137
A computed property name in an interface must directly refer to a built-in symbol.
L130: [StylingIndex.MasterFlagPosition]: number;
L132: * A numeric value representing the class index offset value. Whenever a single class is
A computed property name in an interface must directly refer to a built-in symbol.
L136: [StylingIndex.ClassOffsetPosition]: number;
L138: * Location of element that is used as a target for this context.
A computed property name in an interface must directly refer to a built-in symbol.
L142: * The last class value that was interpreted by elementStylingMap. This is cached
L143: * So that the algorithm can exit early incase the value has not changed.
A computed property name in an interface must directly refer to a built-in symbol.
[21:28:33] typescript: ...les/jodit-angular/node_modules/@angular/core/src/render3/interfaces/styling.d.ts, line: 143
[21:28:33] typescript: ...les/jodit-angular/node_modules/@angular/core/src/render3/interfaces/styling.d.ts, line: 147
L146: [key: string]: any;
L147: } | string | null;
[21:28:33] typescript: ...les/jodit-angular/node_modules/@angular/core/src/render3/interfaces/styling.d.ts, line: 152
A computed property name in an interface must directly refer to a built-in symbol.
L152: [StylingIndex.PreviousMultiStyleValue]: {
L153: [key: string]: any;
A computed property name in an interface must directly refer to a built-in symbol.
[21:28:33] typescript: ...les/jodit-angular/node_modules/@angular/core/src/render3/interfaces/styling.d.ts, line: 159
L158: * the context during allocation. The 0th value must be null so that index values of 0 within
L159: * the context flags can always point to a null value safely when nothing is set.
A computed property name in an interface must directly refer to a built-in symbol.
L36: * are no longer required.
[21:28:33] typescript: ...s/jodit-angular/node_modules/@angular/core/src/render3/interfaces/container.d.ts, line: 37
[21:28:33] typescript: ...s/jodit-angular/node_modules/@angular/core/src/render3/interfaces/container.d.ts, line: 45
L38: [VIEWS]: LViewData[];
A computed property name in an interface must directly refer to a built-in symbol.
L45: * This allows us to jump from a container to a sibling container or component
L46: * view with the same parent, so we can remove listeners efficiently.
A computed property name in an interface must directly refer to a built-in symbol.
[21:28:33] typescript: ...s/jodit-angular/node_modules/@angular/core/src/render3/interfaces/container.d.ts, line: 50
[21:28:33] typescript: ...s/jodit-angular/node_modules/@angular/core/src/render3/interfaces/container.d.ts, line: 55
L50: * Queries active for this container - all the views inserted to / removed from
L51: * this container are reported to queries referenced here.
A computed property name in an interface must directly refer to a built-in symbol.
L55: * The host element of this LContainer.
[21:28:33] typescript: ...s/jodit-angular/node_modules/@angular/core/src/render3/interfaces/container.d.ts, line: 60
A computed property name in an interface must directly refer to a built-in symbol.
L60: * It could also be a styling context if this is a node with a style/class
L61: * binding.
A computed property name in an interface must directly refer to a built-in symbol.
L70: * If renderParent is null it is headless. This means that it is contained
L71: * in another view which in turn is contained in another container and
[21:28:33] typescript: ...s/jodit-angular/node_modules/@angular/core/src/render3/interfaces/container.d.ts, line: 70
[21:28:33] typescript: ...s/jodit-angular/node_modules/@angular/core/src/render3/interfaces/container.d.ts, line: 72
A computed property name in an interface must directly refer to a built-in symbol.
L71: * in another view which in turn is contained in another container and
L72: * therefore it does not yet have its own parent.
A computed property name in an interface must directly refer to a built-in symbol.
[21:28:33] typescript: ...s/jodit-angular/node_modules/@angular/core/src/render3/interfaces/container.d.ts, line: 93
[21:28:33] typescript: ...odules/jodit-angular/node_modules/@angular/core/src/render3/interfaces/view.d.ts, line: 56
A computed property name in an interface must directly refer to a built-in symbol.
L55: * views as it is recursively rendering templates.
L57: * This is the "insertion" view for embedded views. This allows us to properly
[21:28:33] typescript: ...odules/jodit-angular/node_modules/@angular/core/src/render3/interfaces/view.d.ts, line: 58
[21:28:33] typescript: ...odules/jodit-angular/node_modules/@angular/core/src/render3/interfaces/view.d.ts, line: 67
A computed property name in an interface must directly refer to a built-in symbol.
L57: * This is the "insertion" view for embedded views. This allows us to properly
L58: * destroy embedded views.
A computed property name in an interface must directly refer to a built-in symbol.
L66: * container. Embedded views already have a node.next, but it is only set for
L67: * views in the same container. We need a way to link component views and views
L68: * across containers as well.
A computed property name in an interface must directly refer to a built-in symbol.
L76: * If this is an embedded view, HOST will be null.
L78: [HOST]: RElement | StylingContext | null;
[21:28:33] typescript: ...odules/jodit-angular/node_modules/@angular/core/src/render3/interfaces/view.d.ts, line: 77
[21:28:33] typescript: ...odules/jodit-angular/node_modules/@angular/core/src/render3/interfaces/view.d.ts, line: 79
[21:28:33] typescript: ...odules/jodit-angular/node_modules/@angular/core/src/render3/interfaces/view.d.ts, line: 85
A computed property name in an interface must directly refer to a built-in symbol.
L78: [HOST]: RElement | StylingContext | null;
L80: * Pointer to the TViewNode or TElementNode which represents the root of the view.
A computed property name in an interface must directly refer to a built-in symbol.
L85: * If TElementNode, this is the LView of a component.
A computed property name in an interface must directly refer to a built-in symbol.
[21:28:33] typescript: ...odules/jodit-angular/node_modules/@angular/core/src/render3/interfaces/view.d.ts, line: 96
[21:28:33] typescript: ...odules/jodit-angular/node_modules/@angular/core/src/render3/interfaces/view.d.ts, line: 104
L95: * a setter that creates an embedded view, like in ngIf).
L97: [BINDING_INDEX]: number;
A computed property name in an interface must directly refer to a built-in symbol.
L103: * These change per LView instance, so they cannot be stored on TView. Instead,
L104: * TView.cleanup saves an index to the necessary context in this array.
A computed property name in an interface must directly refer to a built-in symbol.
[21:28:33] typescript: ...odules/jodit-angular/node_modules/@angular/core/src/render3/interfaces/view.d.ts, line: 113
[21:28:33] typescript: ...odules/jodit-angular/node_modules/@angular/core/src/render3/interfaces/view.d.ts, line: 121
[21:28:33] typescript: ...odules/jodit-angular/node_modules/@angular/core/src/render3/interfaces/view.d.ts, line: 123
L112: * - For inline views, the context is null.
L114: [CONTEXT]: {} | RootContext | null;
A computed property name in an interface must directly refer to a built-in symbol.
L120: [SANITIZER]: Sanitizer | null;
L122: * The last LViewData or LContainer beneath this LViewData in the hierarchy.
A computed property name in an interface must directly refer to a built-in symbol.
L122: * The last LViewData or LContainer beneath this LViewData in the hierarchy.
L124: * The tail allows us to quickly add a new state to the end of the view list
A computed property name in an interface must directly refer to a built-in symbol.
L124: * The tail allows us to quickly add a new state to the end of the view list
L125: * without having to propagate starting from the first child.
A computed property name in an interface must directly refer to a built-in symbol.
[21:28:33] typescript: ...odules/jodit-angular/node_modules/@angular/core/src/render3/interfaces/view.d.ts, line: 125
[21:28:33] typescript: ...odules/jodit-angular/node_modules/@angular/core/src/render3/interfaces/view.d.ts, line: 127
[21:28:33] typescript: ...odules/jodit-angular/node_modules/@angular/core/src/render3/interfaces/view.d.ts, line: 134
L127: [TAIL]: LViewData | LContainer | null;
A computed property name in an interface must directly refer to a built-in symbol.
L133: * containers because their parent cannot be stored on the TViewNode (views may be inserted
L134: * in multiple containers, so the parent cannot be shared between view instances).
A computed property name in an interface must directly refer to a built-in symbol.
L142: [CONTENT_QUERIES]: QueryList[] | null;
L144: * View where this view's template was declared.
[21:28:33] typescript: ...odules/jodit-angular/node_modules/@angular/core/src/render3/interfaces/view.d.ts, line: 143
[21:28:33] typescript: ...odules/jodit-angular/node_modules/@angular/core/src/render3/interfaces/view.d.ts, line: 149
A computed property name in an interface must directly refer to a built-in symbol.
L148: * The template for a dynamically created view may be declared in a different view than
L149: * it is inserted. We already track the "insertion view" (view where the template was
L150: * inserted) in LViewData[PARENT], but we also need access to the "declaration view"
A computed property name in an interface must directly refer to a built-in symbol.
[21:28:33] typescript: ...odules/jodit-angular/node_modules/@angular/core/src/render3/interfaces/view.d.ts, line: 174
L174: * This must be stored in the view rather than using data as a marker so that
L175: * we can properly support embedded views. Otherwise, when exiting a child view
A 'const' initializer in an ambient context must be a string or numeric literal.
[21:28:33] typescript: ...it-angular/node_modules/@angular/core/src/ivy_switch/compiler/ivy_switch_on.d.ts, line: 12
L11: export declare const R3_COMPILE_NGMODULE_DEFS: typeof compileNgModuleDefs;
L12: export declare const R3_PATCH_COMPONENT_DEF_WTIH_SCOPE: typeof patchComponentDefWithScope;
[21:28:33] typescript: ...de_modules/jodit-angular/node_modules/@angular/core/src/sanitization/bypass.d.ts, line: 23
A computed property name in an interface must directly refer to a built-in symbol.
L23: export interface TrustedHtmlString extends TrustedString {
L24: [BRAND]: BypassType.Html;
A computed property name in an interface must directly refer to a built-in symbol.
[21:28:33] typescript: ...de_modules/jodit-angular/node_modules/@angular/core/src/sanitization/bypass.d.ts, line: 31
L31: export interface TrustedStyleString extends TrustedString {
L32: [BRAND]: BypassType.Style;
A computed property name in an interface must directly refer to a built-in symbol.
[21:28:33] typescript: ...de_modules/jodit-angular/node_modules/@angular/core/src/sanitization/bypass.d.ts, line: 39
L39: export interface TrustedScriptString extends TrustedString {
L40: [BRAND]: BypassType.Script;
A computed property name in an interface must directly refer to a built-in symbol.
[21:28:33] typescript: ...de_modules/jodit-angular/node_modules/@angular/core/src/sanitization/bypass.d.ts, line: 47
L47: export interface TrustedUrlString extends TrustedString {
L48: [BRAND]: BypassType.Url;
A computed property name in an interface must directly refer to a built-in symbol.
[21:28:33] typescript: ...de_modules/jodit-angular/node_modules/@angular/core/src/sanitization/bypass.d.ts, line: 55
L55: export interface TrustedResourceUrlString extends TrustedString {
L56: [BRAND]: BypassType.ResourceUrl;
A computed property name in an interface must directly refer to a built-in symbol.
[21:28:33] typescript: ...de_modules/jodit-angular/node_modules/@angular/core/src/sanitization/bypass.d.ts, line: 63
L62: * This function wraps the trusted string in String and brands it in a way which makes it
L63: * recognizable to {@link htmlSanitizer} to be trusted implicitly.
[21:28:33] ionic-app-script task: "build"
[21:28:33] Error: The Angular AoT build failed. See the issues above
Error: The Angular AoT build failed. See the issues above
at /Volumes/Work/Projects/Ads/node_modules/@ionic/app-scripts/dist/aot/aot-compiler.js:232:55
at step (/Volumes/Work/Projects/Ads/node_modules/@ionic/app-scripts/dist/aot/aot-compiler.js:32:23)
at Object.next (/Volumes/Work/Projects/Ads/node_modules/@ionic/app-scripts/dist/aot/aot-compiler.js:13:53)
at fulfilled (/Volumes/Work/Projects/Ads/node_modules/@ionic/app-scripts/dist/aot/aot-compiler.js:4:58)
at
[ERROR] An error occurred while running subprocess ionic-app-scripts.
ionic-app-scripts build --prod --target cordova --platform ios exited with exit code 1.
Re-running this command with the --verbose flag may provide more information.
`

Specs:
Ionic:

ionic (Ionic CLI) : 4.0.6 (/Users/scobee/.nvm/versions/node/v8.9.4/lib/node_modules/ionic)
Ionic Framework : ionic-angular 3.9.2
@ionic/app-scripts : 3.1.8

Cordova:

cordova (Cordova CLI) : 8.0.0
Cordova Platforms : android 7.0.0, ios 4.5.5

System:

Android SDK Tools : 26.1.1
NodeJS : v8.9.4 (/Users/scobee/.nvm/versions/node/v8.9.4/bin/node)
npm : 5.6.0
OS : macOS High Sierra
Xcode : Xcode 10.0 Build version 10A255

Angular: ~8.2.14
Jodit: ^3.3.24
Angular Jodit: ^1.0.99

I'm trying to disable some features but, it's not working.

These are the options I'm trying to disable:

    cleanWhitespace: false,
    removeEmptyBlocks: false,
    removeEmptyNodes: false,

Apparently, this should be working, but the editor keeps removing my empty tags.
Is there any other feature that I need to disable or enable?

Here's my actual configuration:

  public editorModel = {
    askBeforePasteHTML: false,
    beautyHTML: false,
    buttons: [
      'fullsize',
      'undo',
      'redo',
      'about',
    ],
    defaultMode: '1',
    dialog: {
      resizable: false,
      draggable: false,
    },
    disablePlugins: 'placeholder',
    cleanHTML: {
      replaceNBSP: false,
    },
    cleanWhitespace: false,
    codeMirror: false,
    enableDragAndDropFileToEditor: false,
    removeEmptyBlocks: false,
    removeEmptyNodes: false,
    showCharsCounter: false,
    showWordsCounter: false,
    showXPathInStatusbar: false,
    spellcheck: false,
    toolbarButtonSize: 'large',
    uploader: {
      insertImageAsBase64URI: true,
    },
  };

Update:
I'm trying to use jodit as a document editor, and sometimes we need some spaces and such.

I was wondering if someone already started to migrate this lib to [email protected]

If so, maybe I can help.
If not, maybe I can start this.

Thanks @xdan

Good morning!

As I understand the app version 1.0.69 includes @angular dependencies updates to 7.x.x version. I use jodit-angular: ^1.0.59 @angular: 5.x.x in my application, so after 1.0.69 was published I got the following error:

ERROR in ../jodit-angular/jodit-angular.ts(6,2): Error during template compile of 'JoditAngularModule'
Function calls are not supported in decorators but 'ɵmakeDecorator' was called in 'NgModule'
'NgModule' calls 'ɵmakeDecorator'.
node_modules/@angular/core/src/render3/ng_dev_mode.d.ts(9,11): error TS2451: Cannot redeclare block-scoped variable 'ngDevMode'.

Suppose that it is because of the jodit-angular and my app @angular versions conflict. Looks like breaking changes

Do you consider a way to publish the 2.x.x jodit-angular version? It can help to avoid confusing situations and allow not to use the particular version. like that:

"dependencies": {
    "@angular/animations": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0"
    .......
    "jodit-angular": "1.0.59",
    .......
 }

@xdan, @jodit, would you mind publishing a new version to incorporate the fix for #25 covered in #26?

Hey @xdan ,

I am trying to upload images to the editor. I set my config to include "uploader: { insertImageAsBase64URI: true}". This method allows me to upload a file, however it is in base64.

I would like to edit the image before it is added to the editor. Is there an event from which I can catch the image and modify it?

Thanks for the help.

A feature request to make the editor resizable.

Would it be possible to expose more events, at the moment the only valid event is onChange?

A typical use case would be acting on a file drop event. Also, how would one insert HTML at current cursor/range?

Hi, i'm on Angular 5.2.0, tried plugin version 1.0.32 and latest 1.0.34 but "config" options are always ignored, editor will always display all the toolbar buttons.

tried this as per docs:

<jodit-editor [config]="{buttons: 'bold'}"></jodit-editor>

and

<jodit-editor [config]="{'buttons': 'bold'}"></jodit-editor>

<jodit-editor [config]="{buttons: 'source,|,bold,strikethrough,underline,italic,|,|,ul,ol,|,paragraph,link'}"></jodit-editor>

<jodit-editor [config]="{'buttons': 'source,|,bold,strikethrough,underline,italic,|,|,ul,ol,|,paragraph,link'}"></jodit-editor>

Nothing changes, always same editor with all toolbar options enabled

https://pasteboard.co/Hd5yGzw.png

Am i missing something?

Thanks!