Using Jodit with Angular 5/Ionic about jodit

[stamminator]

In case this helps anyone else, here is a version of @xdan's implementation, but with working ngModel functionality.

import {
  Component,
  Provider,
  OnDestroy,
  AfterViewInit,
  Input,
  forwardRef
} from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR: Provider = {
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => SimpleJoditComponent),
  multi: true
};

@Component({
  selector: 'simple-jodit',
  template: `<textarea id="{{elementId}}" (change)="onChange($event)" (blur)="onBlur()"></textarea>`,
  styleUrls: ['./simple-jodit.component.css'],
  providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR]
})
export class SimpleJoditComponent implements AfterViewInit, OnDestroy, ControlValueAccessor {
  @Input() elementId: String;

  editor;

  private _value = '';
  private onTouchedCallback: () => {};
  private onChangeCallback: (_: any) => {};

  get value(): any {
    if (this.editor) {
      return this.editor.getEditorValue();
    } else {
      return null;
    }
  }
  set value(v: any) {
    if (this.editor) {
      this.editor.setEditorValue(v || '');
    }
  }

  onBlur() {
    this.onTouchedCallback();
  }

  ngAfterViewInit() {
    this.editor = new Jodit('#' + this.elementId, {});
  }

  ngOnDestroy() {
   this.editor.destruct();
  }

  onChange(event: any) {
    this.onChangeCallback(event.target.value);
  }

  writeValue(v: any): void {
    this.value = v;
  }
  registerOnChange(fn: any): void {
    this.onChangeCallback = fn;
  }
  registerOnTouched(fn: any): void {
    this.onTouchedCallback = fn;
  }
  setDisabledState?(isDisabled: boolean): void {
    // TODO: see if Jodit has built is disabled state
  }
}

And from the parent component...

<simple-jodit #editor [elementId]="'editor'" [(ngModel)]="someProperty"></simple-jodit>

[xdan]

Hi, based on your code - i wrote component
https://xdsoft.net/jodit/examples/intergration/angular-jodit.html

[xdan]

I try to create angular module, but now you can use it like this
in your angular-cli.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>

[tonymccallie]

I can see that the src/ has Jodit.ts that exports Jodit, but I can't find a way to import it successfully.

[xdan]

Are you using TypeScript? Show me your code please

[tonymccallie]

I am. I am using Ionic 3 which is based on Angular 5. I've tried both of these methods for importing Jodit:
import * as Jodit from 'jodit/src';
which gives me a lot of errors like:
typescript: node_modules/jodit/src/Config.ts, line: 523 Cannot find name 'require'.

and

import { Jodit } from 'jodit';

which gives me:
Error: Uncaught (in promise): Error: Cannot find module "jodit" Error: Cannot find module "jodit"

[tonymccallie]

Here's a link to the github:
https://github.com/tonymccallie/jupiter/blob/master/src/pages/page-create/page-create.ts

[tonymccallie]

Thanks so much for your reply. I was able to take what you gave me and make it work. I'm using Ionic's Lazy Loading of pages, which made some complications, but here's the solution I found (in case it will help someone else)

in package.json you need to add the section:

"config": {
	"ionic_copy":"./copy.config.js"
  },

in the same folder as package.json you need a file copy.config.js with these contents

module.exports = {
	copyJodit: {
		src: '{{ROOT}}/node_modules/jodit/build/jodit.min.js',
		dest: '{{BUILD}}'
	},
	copyJoditCss: {
		src: '{{ROOT}}/node_modules/jodit/build/jodit.min.css',
		dest: '{{BUILD}}'
	}
}

in my index.html, I had to add the following lines:

<link href="build/jodit.min.css" rel="stylesheet"><!-- after main.css -->
...
<script src="build/jodit.min.js"></script><!-- before main.js -->

I created a component with ionic g component Jodit

and included the Component Code you gave above, PLUS, I added the declaration there

declare var Jodit: any;

on the page I wanted the editor, I had to include the shared components module in the page.module.ts file

import { ComponentsModule } from './../../components/components.module';
...
imports: [
	IonicPageModule.forChild(TestPage),
	ComponentsModule
  ],

That allowed me to use the other code like you specified in the previous post.

Thanks for an awesome editor and your responses.

[stamminator]

@xdan Not using Ionic, but your solution still worked for me. I did have to capitalize the Jodit var in typings.d.ts, but besides that, running ng generate component somepath/simple-jodit, overwriting the generated simple-jodit.component.ts with your version and deleting the unneeded simple-jodit.component.html seems to have everything in clean, working order.

Though this is a good stopgap, do you plan on implementing official Angular support in the future? I would love to help in the effort, but I think my newness to both Angular 2+ and TypeScript would be more of a hindrance than a help.

@xdan Hello, I'm using Ionic 3, Angular 4 and typescript 2.3.4.
Using the wrapper component angular-jodit, I get those 2 errors:

[09:27:03]  transpile started ... 
[09:27:10]  typescript: node_modules/jodit-angular/Events.d.ts, line: 6 
            Cannot find name 'Jodit'. 

       L5:      args: any[];
       L6:      editor: Jodit;

[09:27:10]  typescript: node_modules/jodit-angular/jodit-angular.component.d.ts, line: 13 
            Cannot find name 'Jodit'. 

      L12:  element: HTMLElement;
      L13:  editor: Jodit;
      L14:  constructor(elementRef: ElementRef, ngZone: NgZone);

Any idea? Thanks.