I installed a text editor called Jodit and I'm having some issues trying to integrate it into my angular application.
In order, I did:
npm install --save jodit
"node_modules/jodit/build/jodit.min.js"
"node_modules/jodit/build/jodit.min.css"
Here is my component:
import * as jodit from 'jodit';
@Component({
selector: 'app-test',
styleUrls: ['./test.component.scss'],
template: `
<textarea id="test" name="editor"></textarea>
`
})
export class TestComponent implements OnInit {
public editor: any;
constructor() {}
ngOnInit() {//
const elem: HTMLElement = document.getElementById('test');
this.editor = new jodit.Jodit(elem, {});
}
Im getting the following errors
src/app/test.component.ts(21,28): error TS2339: Property 'Jodit' does not exist on type 'typeof import("C:/Users/test/Desktop/test/node_modules/jodit/src/types/index")'.
src/app/test.component.ts(41,27): error TS2339: Property 'Jodit' does not exist on type 'typeof import("C:/Users/test/Desktop/test/node_modules/jodit/src/types/index")'.
I can't compile it, but with npm start
I can make it working (I still have the errors but it compiles and I can see the text editor).
Am I missing something, it looks like a type linkage error?
I try to create angular module, but now you can use it like this in your angular.json
"scripts": [
"../node_modules/jodit/build/jodit.min.js",
],
in typings.d.ts add
declare var Jodit: any;
and create component like this
import {
Component,
OnDestroy,
AfterViewInit,
EventEmitter,
Input,
Output
} from '@angular/core';
@Component({
selector: 'simple-jodit',
template: `<textarea id="{{elementId}}"></textarea>`
})
export class SimpleJoditComponent implements AfterViewInit, OnDestroy {
@Input() elementId: String;
@Output() onEditorKeyup = new EventEmitter<any>();
editor;
ngAfterViewInit() {
this.editor = new Jodit('#' + this.elementId, {});
}
ngOnDestroy() {
this.editor.destruct();
}
}
and use it
<simple-jodit
[elementId]="'my-editor-id'"
(onEditorKeyup)="keyupHandlerFunction($event)"
>
</simple-jodit>