0

我安装了一个名为Jodit的文本编辑器，但在尝试将其集成到我的 Angular 应用程序中时遇到了一些问题。
按顺序，我做了：

  1. npm install --save jodit
  2. 在 angular.json build-options-sripts 中添加"node_modules/jodit/build/jodit.min.js"
  3. 在 angular.json build-options-styles 中添加"node_modules/jodit/build/jodit.min.css"

这是我的组件：

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, {});
}

我收到以下错误 

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")'.

我无法编译它，但npm start我可以让它工作（我仍然有错误，但它可以编译并且我可以看到文本编辑器）。
我是否遗漏了什么，它看起来像是类型链接错误？

4

2 回答 2

1

我尝试创建 angular 模块，但现在您可以在angular.json中像这样使用它

"scripts": [
  "../node_modules/jodit/build/jodit.min.js",
],

在typings.d.ts添加

declare var Jodit: any;

并像这样创建组件

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();
  }
}

并使用它

<simple-jodit
  [elementId]="'my-editor-id'"
  (onEditorKeyup)="keyupHandlerFunction($event)"
  >
</simple-jodit>
于 2019-09-16T02:00:38.463 回答
0

您还可以下载此包装器Jodi 组件包装器

于 2019-09-16T02:08:57.947 回答