angulartypescriptjodit

Add a typescript library to angular


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:

  1. npm install --save jodit
  2. Added in angular.json build-options-sripts "node_modules/jodit/build/jodit.min.js"
  3. Added in angular.json build-options-styles "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?


Solution

  • 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>